3 divs on same row inside other div

Question

I've created 3 columns of divs inside another div and stacked on the moment how to make them the same height as the mid one and situate on the top of the div. Can you please suggest what can be done to achieve that?

.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>

Answer 1

I would go with flex-box since it have high support now.

.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>