Underlining lines in full width, not only text

Question

Hi,
I'm currently trying to set something up with HTML/CSS that looks like a post-it note.

An Image of what I'm aiming at

Please note that every line should be underlined, no matter how many characters are in that line. Also every new line should be underlined completely.

HTML:

<p>
    <img src="http://trööt.net/img/pin.png" alt="Stecknadel"/>
    <font>Heading</font><br />
    <span class="blockMargin">
    <span class="underline">
        <strong>Subheading</strong> text text text
    </span>
    </span>
</p>

CSS:

p {
    background-Color: #ffc; 
    padding: 1em; 
    width: 40em; 
    box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7); 
    text-align: justify;
}
img{
    float: None;  
    height: 4em; 
    display: block; 
    margin-left: Auto; 
    margin-right: Auto;
}

.blockMargin{
    display: block; 
    margin-bottom: -1px;
}

.underline{
    border-bottom: 1px dotted #c03;
}

This is the code I'm currently using (got the idea already from stackoverflow.com). However, it doesn't underline the lines complete but works exactly like text-decoration: underline...

Any ideas? Maybe I should add that I create this using WordPress and the Nuclear-Theme.

Thank you very much for your help!

Example on JSFiddle: http://jsfiddle.net/8w9Lj7nd/

Answer 1

http://jsfiddle.net/8w9Lj7nd/1/

There you go.

.underline{
border-bottom: 1px dotted #c03;
width: 100%;
display: block;
}