UPDATE: It seems that the length is determined by the .main div being the parent element and sizing accordingly. Unsure how to make adjustments...
How can I reduce the dashed line to be the same height as the text?
Here's a link to the Fiddle: http://jsfiddle.net/7U7H3/
<div class="container clearfix">
<div class="main">
<p>
This is the most amazing cheese selection I've ever come across! Excited for our next order!
<p >
<img src="img/cheese1.jpg" alt="sky">
</p>
<p>
<img src="img/cheese2.jpg" alt="sky" id="img">
</p>
<p id="mainb">
The best selection of cheese I've ever seen! Cannot wait for our next order!
<p>
</div>
.main {
-webkit-column-gap: 1em;
-webkit-column-rule: 5px dotted #FFF;
-webkit-columns: 100px 2;
font-size: 3.5vw;
text-align: right;
line-height: 1.0;
}
img {
margin: 1.5em 0;
max-width: 100%;
float:left;
}