JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
    <div class="footer" id="footerL">
         <h1>Left</h1>
    </div>
    <div class="footer" id="footerC">
         <h1>Mid</h1>
         <h4><a>این خبر اولین خبر در این سایت است</a></h4>
    </div>
    <div class="footer" id="footerR">
         <h1>Right</h1>
    </div>    
</footer>

CSS

div.footer {
    padding:15px 8%;
    margin:0px;
    display:inline-block;
    width:33.333%;
}
div#footerR {
    float:right;
}
div#footerL {
    float:left;
}
div#footerC {
    float:left;
    position:relative;
}
div#footerC:before {
  content : "";
  position: absolute;
  top: 15%;
  left: 0;
    height:75%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width:100%;
}
div#footerC, div#footerL, div#footerR {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
footer {
    text-align:center;
    width:100%;
    display:flex;
}