JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div>
  1
  </div>
</header>
<section class="one">
  <div>
    2
  </div>
</section>
<section class="two">
  <div>
    3
  </div>
</section>

CSS

header {
  background: blue;
  padding: 15px 0;
}
header div {
  max-width: 500px;
  background: red;
  margin: auto;
}

section.one {
  float: left;
  width: 33%;
  background: green;
  padding: 15px 0;
}
section.one div {
  background: red;
  float: right;
}

section.two {
  float: left;
  width: 67%;
  background: orange;
  padding: 15px 0;
}
section.two div {
  background: red;
  float: left;
}