JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Not working but aligned</h1>
<div class="wrapper">
  <div class="box-A">
    Lorem
  </div>
  <div class="box-A">
    Ipsum<br>
    Ipsum<br>
    Ipsum<br>
    Ipsum<br>
  </div>
</div>

<h1>Working, but not aligned</h1>
<div class="wrapper">
  <div class="box-B">
    Lorem<br>
    Lorem<Br>
  </div>
  <div class="box-B">
  Ipsum<br>
  Ipsum<br>
  </div>
</div>

CSS

.wrapper {
  width: 100%;
  padding: 10px 0;
  background: red;
}
.box-A {
  width: 49%;
  float: left;
}

.box-A {
  width: 49%;
}