JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div>
   <span class="content"></span>
  </div>
  <div>
   <span class="content"></span>
  </div>
</section>

CSS

section {
  height: auto;
  border: 1px solid red;
  padding: 15px;
}
section:after {
  content: "";
  display: table;
  clear: both;
}
div {
  width: 40%;
  border: 2px solid #000;
  margin: 0 15px;
  float: left;
  position: relative;
  min-height: 300px;
}

.content {
  width: 50px;
  height: 50px;
  background: #000;
  
  position: absolute;
  top: 50%;
  left:0;
  transform: translate(0%,-50%);
}