JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <article>
    FIRST
  </article>
  <article>
    SECOND
  </article>
</div>

CSS

.wrapper {
  border: solid 1px black;
  
  margin: 0 auto;
  width: 600px;
  clear: both;
}

.wrapper:after {
  display: table;
  content: "";
  clear: both;
}

article {
  width: 50%;
  float: left;
}

article:first-child {
  background-color: blue;
}

article:last-child {
  background-color: red;
  width: 55%;
  margin-left: -29px;
}