JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <article>
    <div style="width:100%" class="one">One</div>
    <div style="width:100%" class="two">Two</div>
    <div style="width:70%" class="three">Three</div>
  </article>
  <div  style="width:30%" class="four">Four</div>
</div>

CSS

* {box-sizing: border-box;}
.wrapper div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 10px;
  color: #d9480f;
}

.one,
.two,
.three,
.four {
  float: left;
}