JSFiddle - React, Tailwind, and code Playground

by Dmitry Fateev

HTML

<div class="wrapper">
  <div class="block1"></div>
  <div class="main"></div>
  <div class="block2"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  width: 90%;
  margin: 25px auto 0;
  border: 1px solid #000;
}

.wrapper {
  height: 50px;
}

.block1,
.block2 {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}

.block1 {
  float: left;
}

.block2 {
  float: right;
}

.main {
  float: left;
  width: auto;
  height: inherit;
}