Div boxes not aligning properly using inline-block

Question

I have some very simple code which works perfect for what look I\'m trying to achieve. I have two divs which are displayed as \"boxes\" which are contained within an outer div w

Answer 1

Since the boxes are already inline-block you can add vertical-align: top to the .box style.

Answer 2

.box {
  display: inline-block;
  border: solid 1px;
  vertical-align: top;
  width: 40%;
}

<div id="boxContainer">
  <div class="box">
    <h3>BOX 1</h3>
    <p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
  </div>

  <div class="box">
    <h3>BOX 2</h3>
    <p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
  </div>
</div>

You can use the vertical-align CSS property.

It has effect only on inline, and inline-block elements.

This is a great reference on vertical-align.