Vertical line with text around

Question

I need to do something like this:

A vertical line with text on the left and on the right.

I looked How to make a vertical line in HTML

I though about making a vertical line and then use border-left and border-right

But I don't see how to do it in pratic.

Answer 1

I made a very basic example, you might have to modify the #content rule for the size you need:

HTML

<div id="content">
    <div id="text">
        <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="txt-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.         </div>
    </div>
    <div id="vline"></div>
</div>

CSS

body{
  margin: 0;
}
.txt{
  margin-left: 5%;
}
.txt-r{
  margin-left: 55%;
}
.txt-r, .txt {
   width: 40%;
   margin-top: 1%;
   border-style: solid;
}
#text{
  position: absolute;
}
#vline{
  position: absolute;
  border-left: thick solid #000000;
  margin-left: 50%;
  height: 100%;
}
#content{
  position: absolute;
  width: 100%;
  height: 100%;
}

JSFIDDLE