How come my divs stay in line in a row like this: jsFiddle
<div class="row solve-item-row">
<div class="solve-item" style="background:red">
some text
</div>
<div class="solve-item" style="background: green">
</div>
<div class="solve-item" style="background: blue">
</div>
</div>
.solve-item-row {
width: 100%;
}
.solve-item {
display: inline-table;
height: 100px;
width: 30%;
}
But as soon as I add text or image or anything they get all thrown off like this: jsFiddle ?