JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="container">
    <div class="item" style="background: red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit nibh nulla. Vivamus elementum eu risus sed vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eget elementum magna, ut imperdiet risus. Nunc quis faucibus magna.</div>
    <div class="item" style="background: green">b</div>
    <div class="item" style="background: blue">c</div>
    <div class="item" style="background: purple">d</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* overflow: hidden;     */
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-column: auto auto; */
    grid-row: auto auto;
}

.item {

}

.item:hover {
  padding: 0 30px 30px 0;
}

.item:before {
  content: "";
  width: 1px;
  height: 100%;
  display: block;
  background: yellow;
  transition: all .5s;
  float: left;
}

.item:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: yellow;
  transition: all .5s;
}

.item:hover:after {
    padding: 30px 0;
}

.item:hover:before {
    padding: 0 30px;
}