Question: I have several divs on the same line. The divs have a width but no explicit height. They get their height from the amount of text they contain. One of the divs has a lot more text than the others but I would like them to all be the same height.

For example, in [this](http://jsfiddle.net/uc2rtxma/) fiddle I would like Box 1, 2, 3, and 5 to be the same height as box 4 without adding any additional elements or using a hard coded height and it has to work back to IE8. Is this possible?

Maybe something like:

```
height: line-height; /* i know this isn't a real property */

```

![enter image description here](https://i.stack.imgur.com/Cu3YM.png)

Answer: 
Change the `display:inline-block` to `display: table-cell`:

**[jsFiddle example](http://jsfiddle.net/uc2rtxma/1/)**

And if you need to fiddle with the spacing between the cells you could wrap them in a container and apply border-spacing to it:

**[jsFiddle example](http://jsfiddle.net/j08691/0yhcmv8g/)**
If someone wants to use latest CSS properties then flexbox is a way to go ....

```
body > div { /* Give an id or a class to your wrapper div */
    display: flex;
}

```

So am sure you must be having a wrapper element/div so just assign `display: flex;` to that and you are done. 

```
<!-- Flex wrapper -->
<div>  <!-- <-- Add this -->
    <div>BOX 1</div>
    <div>BOX 2</div>
    <div>BOX 3</div>
    <div>BOX 4 - But this box has more text</div>
    <div>BOX 5</div>
</div>

```

If you want spacing (I think you don't need that, the one in your example seems like a white space issue) but if you need then I've provided margin to the child elements.

[**Demo**](http://jsfiddle.net/uc2rtxma/2/)