I have the following profile screen with the user's information as per below image.

current screen

This is my code:

displayProfile = (profile) => {
    return (
      <div className="custom-border">
        <div className="container-Profile">
          <div className="box-1Profile">
            <span>
              <label>
                <h5>Contact Person: </h5>
              </label>
            </span>
            <h5 className="inline-padding">{profile.contactPerson}</h5>
            <br />
            <span>
              <label>
                <h5>Company Name: </h5>
              </label>
              <h5 className="inline-padding">{profile.companyName}</h5>
            </span>
            <br />
            <span>
              <label>
                <h5>Mobile Number: </h5>
              </label>
              <h5 className="inline-padding">{profile.mobileNo}</h5>
            </span>
            <br />
            <span>
              <label>
                <h5>Work Number: </h5>
              </label>
              <h5 className="inline-padding">{profile.workNo}</h5>
            </span>
            <br />
            <span>
              <label>
                <h5>Industry/Sector: </h5>
              </label>
              <h5 className="inline-padding">{profile.industry}</h5>
            </span>
            <br />
          </div>
        </div>
        <button className="btn btn-primary" onClick={this.showModal}>
          {" "}
          Edit Profile
        </button>

This is my CSS:

/*Profile Page*/
.container-Profile{
  display: flex;
  padding: 10px;
  flex-grow: 1;
  
}
.container-Profile div{
  border: 1px black solid;
  padding: 10px;
}
.box-1Profile{
  width:50%;
}

I would like the h4 tags to be in line with one another so that it looks neater as per the below image: envisaged screen

Is this possible and how do I do this?

CodePudding user response：

You should have Contact Person, Company Name and others in one column (inside div with display:flex; flex-direction:column;). Jack Sparrow, Pirate and others should be in other column (inside div with display:flex; flex-direction:column;) and that two columns you should put inside div with display:flex.

CodePudding user response：

    Put your first <h5> tag inside <span> tag & instead of your CSS code use the below code:
    
*{
  padding:0;
  margin: 0;  
} 
/*Removes the default margin & padding.*/
    
span{
  display: flex;
  margin-block: 15px;
} 
/*Display your span content in flex & give it a margin(according to you) from top and bottom.*/
    
h5{
  padding-left:15px;
} 
*/Add a little bit of padding to the data from left so it don't stick with label*/

.box-1Profile{
  border:1px solid #000;
} 
*/Add border to your content*/