JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div class="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</div>

CSS

div {
    border: 1px solid red;
    margin: 5px;
}
.container {
    width: 200px;
    height: 300px;
    position: absolute;
    padding: 50px;
}
#box1, #box2 {
    width: 50px;
    height: 50px;
}
#box1 {
    background-color: red;
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 50%;
  
}
#box2 {
    background-color: yellow;
    position: relative;
    left: 50px;
}