JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
  <div>content content content</div>
  <div>content content content</div>
  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
  </div>
<div style="text-align: center"><span style="background-color: aqua"><b>TRUE<br>CENTER</b></span></div>  
  <div>content content content</div>
  <div>content content content</div>
</div>

CSS

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;

  /* new */
  display: flex;
  justify-content: center; /* center children horizontally */
  align-items: center;     /* center children vertically */
}

/* new */
#wrapper::after {
  content: 'right';
  width: 13vh;
  border: 1px dashed black;
  /* visibility: hidden; */
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  border: 1px solid red;
  margin: 0 5px; /* new */
}

#left {
  display: inline-block;
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}