You need to place divs in a row. My code is :

 <div class="alert alert-info" style="width: 100%"> <div style="float:left; width: 48%"> <center>Вы </center> </div> <div style="width: 4%"> <div style="width: 1px; height: 100px; background-color: #97070B;"></div> </div> <div style="float:right; width: 48%"> <center>Вы </center> </div> </div>

The problem is that the center must have a vertical div type hr .

    2 answers 2

    Perhaps something like this using HTML and CSS.

    Fiddle

     .left { float: left; width: 48%; background: #ccc; width: 48%; } .right { float: right; width: 48%; background: #777 } .hr { float: left; width: 1px; height: 100px; background-color: #97070B; margin-left: 2%; } 
     <div class="alert alert-info" style="width: 100%"> <div class="left">Вы 1</div> <div class="hr"></div> <div class="right">Вы 2</div> </div>

      div - block element: elements, after it, will be placed on a new line. Use display: inline-block; :

       div.left { float:left; width: 48%; display: inline-block; } div.right { float:right; width: 48%; display: inline-block; } div.separator { width: 1px; height: 100px; background: #97070B 1px; display: inline-block; } 
       <div class="left"> <center> Вы 1 </center> </div> <div class="separator"></div> <div class="right"> <center> Вы 2 </center> </div>

      • Does not help. - Rammsteinik
      • And true. =) - Rammsteinik