JSFiddle - React, Tailwind, and code Playground

by Augustus Yuan

HTML

<div class="col-container">
    <div class="col left"></div>
    <div class="col middle">
        <div class="top inner"></div>
        <div class="bottom inner hide"></div>
    </div>
    <div class="col right"></div>
</div>
<div class="col-container">
    <div class="col left"></div>
    <div class="col middle">
        <div class="top inner hide"></div>
        <div class="bottom inner"></div>
    </div>
    <div class="col right"></div>
</div>
<div class="col-container">
    <div class="col left"></div>
    <div class="col middle">
        <div class="top inner"></div>
        <div class="bottom inner"></div>
    </div>
    <div class="col right"></div>
</div>

CSS

.col-container {
    float: left;
    margin-bottom: 10px;
}

.col {
    float: left;
    width: 100px;
    height: 200px;
    border: 1px solid black;
    margin-left: 10px;
    position: relative;
}

.inner {
   width: 100px;
   height: 75px;
   margin-left: auto;
   margin-right: auto;
   position: absolute;
}

.top {
  top: 0;
  border: 1px solid red;
}

.bottom {
  bottom: 0;
  border: 1px solid green;   
}

.hide {
    display: none;
}