How do I place a <hr> beside an image? - html

Question

In my fiddle you will see a break in text, I would like to put a <hr> there and decorate it in the CSS, but I have no idea how to do this as when I do this it breaks my inline-block, and I'm thinking that's because the <hr> is a block element. Is there any creative solutions around this? I need it to be fixed there between the two paragraphs of text to maintain responsiveness.
Thanks!
FIDDLE
HTML:
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS:
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}

Answer 1

You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up being:
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
(Additional element is .text-wrap. Note that I split up the two paragraphs into individual <p> elements.) The CSS I left mostly alone, except I removed the definition for .first p, and added these two:
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
Here's a JSFiddle example that shows what this achieves. If this isn't what you were looking for, or you wanted to use a different method, let me know and I'll be happy to help further!

Answer 2

Here's an alternative to Serlite's answer. It basically puts the <hr> in implicitly, using CSS.
fiddle
We add a border to the top of each paragraph, except the first one in each container.
p {
...
border-top: 1px solid black;
}
p:nth-child(1) {
border-top: none;
}