I am trying to create two sentences with a fixed width of 30%, but the first words in my div go to the next line. The class="left" words are not displaying properly, and then my second div "words" gets mixed with the first div.
HTML
<div class="bg">
<span class="left">Hello Hello Hello Hello my text is missing please show</span>
<span class="right">My friend.</span>
</div>
<div class="clear"></div>
<div class="bg">
<span class="left">sohan sohan sohan sohan sohan sohan sohan</span>
<span class="right">My friend.</span>
</div>
CSS
.bg{width:90%; margin:0 auto; position:relative;}
.bg .left{width:auto; max-width:30%; min-width:10%; position:absolute; text-align:justify; background-color:white;}
.bg .right{width:auto; max-width:30%; min-width:10%; float:right; overflow-x:hidden; overflow-y:hidden; text-align:justify; background-color:white;}
.bg .left:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . ."}
.clear{clear:both;}
RESULT
Hello Hello Hello Hello.................................... My friend.
sohan sohan sohan ......................................... My Friend.
sohan sohan sohan sohan