JSFiddle - React, Tailwind, and code Playground

by John_C

HTML

<main>
  <section>
      <div class="left">
    <article class="first">
      I fill out half of the available space!
    </article>
    <article class="second">
      I fill out half of the available space!
      <strong>Be aware that contents of article and aside may be changed!</strong>
    </article>
      </div>
    <aside>
      I'm 50px width!
    </aside>
  </section>
</main>

CSS

.left{
    padding-right:50px;
}
section{
    position:relative;
}
.first, .second{
    float:left;
    width:50%;
}
aside{
    position:absolute;
    top:0;
    right:0;
    width:50px;
    background:green;
}