JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div class="clearfix">
  <div class="box margin-right" style="background-color:#bbb">
    <h1>
      Header1
    </h1>
    <div class="border">
      <div>
        <h3>
          Container1
        </h3>
        Some text inside the box.
        Some text inside the box.
        Some text inside the box.
      </div>

    </div>
  </div>
  <div class="box margin-left" style="background-color:#ccc">
    <h1>
      Header2
    </h1>
    <div class="border">
      <div>
        <h3>
          Container2
        </h3>
        Some text inside the box.
      </div>

    </div>
  </div>
</div>

CSS

.clearfix {
   display: flex;
 }

 .box {
   float: left;
   width: 43%;
   padding: 10px;
   display: flex;
   flex-direction: column;
 }


 .margin-left {
   margin-left: 10px
 }

 .margin-right {
   margin-right: 10px
 }

 .border {
   border: 1px solid red;
   flex-grow: 1
 }