How to make <span> text wrap nicely below start of first line
<p>I am trying to make a simple</p>

<pre><code>label: value 
</code></pre>

<p>pairing look nice. The problem I have is that when the value is so long that it wraps around and goes on to a second line, the second line starts below the label text. I would like it to start on the same horizontal position as the first line of text.</p>

<p>The HTML looks like this: </p>

<pre><code>&lt;div class="status-container"&gt;

  &lt;span class="status-label"&gt;Status:&lt;/span&gt;

  &lt;span class="status-text"&gt;This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying&lt;/span&gt;

&lt;/div&gt;
</code></pre>

<p>The CSS looks like this:</p>

<pre><code>.status-container {
  margin-top: 100px;
}

.status-text {
    font-weight: bold;
    margin-left: 10px;
}
</code></pre>

<p>I have create a PLNKR to show how it looks: <a href="https://plnkr.co/edit/qbFj4bwEpPf7aUldvjBU" rel="nofollow">https://plnkr.co/edit/qbFj4bwEpPf7aUldvjBU</a></p>

<p>I am sure I am forgetting something extremely simple and obvious, but it is a while since I did this CSS stuff..... All help much appreciated.</p>