CODEWITHSUNDEEP
htmlcssreactjs
Kevin.a
Kevin.a

Reputation: 4306

Print divs on same line height css

Hello I got the following code : 

                <div className='employee-container'>

                    <div>
                        <span>Betrokken medewerkers: </span>
                        {project.employees.map(employee => (<li>{employee}</li>))}
                    </div>


                    <div>
                        <span>project managers: </span>
                        {<li>{project.projectManager}</li>}
                    </div>


                </div>

CSS 

.employee-container { 
    width: 21%;
    min-width: 300px;
    display: inline-block;
    height: 40px auto;
    background: white;
    border: 1px solid #e0e0e0;
    margin-top: 5px;
    margin-left: 20px;
    padding-left: 20px;
    padding-top:20px;
    font-size: 16px;
    padding-bottom:10px;
    padding-right:10px;
    width: 820px;
    margin-bottom:7%;
}

.employee-container div { 
    display: inline-block;
}

.employee-container p { 
    font-weight: bold;
}

But somehow my divs which i want to be printed next to eachother turn out like this :

enter image description here

How can i get it on the same line no matter the amount of content.

Upvotes: 0

Views: 229

Answers (2)

Chris
Chris

Reputation: 6631

Because you're using inline-block, you will have to set the vertical-align property on the child element in order to align them at the top.

.employee-container div { 
  display: inline-block;
  vertical-align: top; 
}

Duplicate of:

Align inline-block DIVs to top of container element

Upvotes: 1

Yousaf
Yousaf

Reputation: 29344

set display of employee-container and its child div elements to flex and set flex-direction of child div elements to column 

.employee-container {
  background: white;
  padding: 20px 0;
  border: 1px solid #e0e0e0;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
}

.employee-container div {
  display: flex;
  flex-direction: column;
}
<div class='employee-container'>

  <div>
    <span>Betrokken medewerkers: </span>
    <span>employee 1</span>
    <span>employee 1</span>
    <span>employee 1</span>
    <span>employee 1</span>
  </div>


  <div>
    <span>project managers: </span>
    <span>employee 2</span>
    <span>employee 2</span>
  </div>

</div>

Upvotes: 1

Related Questions