CSS word wrap second line of text

Question

How can I make the text stay "on it's own side" when it's overflowing the first row?

I have a section that holds two divs. The two divs are positioned side by side but if the first row is full it starts on a new line below the first div. (and that is the problem)

The first div is 120px wide because that is the widest text that can be printed there. The second div is/should be the rest of the screen.

I created a link to jafiddle also in case the one on the page does not make it clear. The problem occures when you have a smal window (phones etc.).

The page is generated from php.

http://jsfiddle.net/tL2fkLhq

.section{
        display: inline-block;
        width: 100%;
        float: left;
    }
    .pTrans1{
        float: left;
        width: 120px;
        color: red;

    }
    .pTrans2{
        display: inline;
        
    }

<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

Answer 1

You can use display: table;

DEMO

.section{
   display: table;
}
.pTrans1{
   width: 120px;
   color: red;
   display: table-cell;
 }
.pTrans2 {
  display: table-cell;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section><br>