JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DF JA">
  <div class="DF JA line"></div>
  <div class="DF JA text">Текст</div>
  <div class="DF JA line"></div>
</div>

CSS

/* Flex Constructor */

.DF{display:flex;}
.JA{justify-content:center;align-items:center;}

.JCC{justify-content:center}
.JCA{justify-content:space-around}
.JCB{justify-content:space-between}
.JCS{justify-content:flex-start}
.JCE{justify-content:flex-end}

.AIC{align-items:center;}
.AIS{align-items:flex-start;}
.AIE{align-items:flex-end;}
.FDC{flex-direction:column}
.FDCR{flex-direction:column-reverse}
.FDR{flex-direction:row}
.FDRR{flex-direction:row-reverse}

.FWW{flex-wrap:wrap;}

/* Flex Constructor END */

/* Flex Constructor - http://selfscript.ru/FC.php */



.line{width: 10px;height: 1px;background: #000;margin: 0px 4px 0px 4px;}
.text{color: #000;}