JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
.container {
width: 80%;
margin: 2em auto;
height: 100%;
}
.one {
background-color: whitesmoke;
border: 1px solid gainsboro;
width: 10%;
min-width: 3em;
padding: 1em;
/* margin: 1em; */
height: 10em;
}
.one, .two, .three {
float: left;
}
.two {
background-color: whitesmoke;
border: 1px solid gainsboro;
border-right: none;
border-left: none;
width: 40%;
min-width: 5em;
padding: 1em;
/* margin: 1em; */
height: 10em;
}
.three {
background-color: whitesmoke;
border: 1px solid gainsboro;
width: 10%;
min-width: 3em;
padding: 1em;
/* margin: 1em; */
height: 10em;
}
.one-inner {
background: #ccc;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
}
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
}
.three-inner {
background: #ca8;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
}
.box {
width: 15em;
height: 10em;
border: solid gray 0.15em;
margin: 0.5em;
display: inline-block;
padding: 0.5em;
border-radius: 0.5em;
}
.row {
display: block;
padding: 0 0.5em;
margin: 0 auto;
}
.unit {
min-width: 33em;
width: 33em;
margin: auto;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.margin-bottom-1em {
margin-bottom: 1em;
}
.margin-top-1em {
margin-top: 1em;
}
.margin-top-2em {
margin-top: 2em;
}
.buttons {
width: 30.6em;
margin: 2em auto;
}
.button-fixed-width {
width: 10em;
display: inline-block;
}