3 divs on one line inside another div

Question

I created 3 columns of divs inside another div and laid out at that moment how to make them the same height as in the middle and sit on top of the div. Can you suggest what can be done to achieve this?

.div-box {
  width: 500px;
  margin: 0 auto;
}

.left {
  width: 200px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.mid {
  width: 200px;
  display: inline-block;
}

.right {
  width: 50px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

Run codeHide result

Answer 1

I would go with flex-box, since now it has a tall one.

.div-box {
  width: 500px;
  margin: 0 auto;
  display: flex;
}

.left {
  width: 200px;
  background-color: red;
  display: flex;
}

.mid {
  width: 200px;
  display: flex;
}

.right {
  width: 50px;
  background-color: black;
  display: flex;
}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

Run codeHide result

Answer 2

You can use the table layout:

.div-box {
  width: 500px;
  margin: 0 auto;
  display: table;
}

.div-box > div{display: table-cell}

.left {background-color: red}

.mid {width: 200px}

.right {background-color: black}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

Run codeHide result

Answer 3

js-, , ; jquery-match-height.

Answer 4

, ...

Flexbox:

.div-box {    
  display: flex;
  align-items: center;
}

( > ie9).

---

:

.div-box {
  display: table; 
  table-layout: fixed;
}

/*catches immediate children of div-box*/
.div-box > * {
  display: table-cell;
}

, - . . .

---

JavaScript:

      var childrenOfDivBox = document.getElementsByClassName("div-box")[0].getElementsByTagName("div"); /*grabs a collection of all the divs under div-box*/

      /*the middle div is the second child, hence childrenOgDivBox[1], due to zero-based counting */   
      var middleHeight = childrenOfDivBox[1].offsetHeight;

      childrenOfDivBox[0].style.height = middleHeight; 
      childrenOfDivBox[2].style.height = middleHeight;

( > ie8) (getElementsByClassNames 9, , ID, ).

, 'p' div .