+------------------------+
|+-------+ ~~~~     TITLE| <--how can I stop the text wrapping up the
||       | ~~~~~~~~~~~~~ |                      left hand side here?
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ |
|+-------+            ^  |   Title Div (class="widgetHeader" in example)
+---------------------|--+
   ^                  |
   |
 Thermometer div
 (all good)
                       "widgetContent" in example fiddle

+------------------------+
|+-------+          TITLE|
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ |
||       | ~~~~~~~~~~~~~ |
|+-------+ ~~~~~         |
+------------------------+

.widgetHeader {
    padding-top:5%;
    float:right;
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}
.widgetContent {
    float:left;
    text-align:left;
    padding-top:20%;
}

.widgetHeader {
    padding-top:5%;
    margin-right:4px;
    font-weight:bold;
    text-align:right;
    text-decoration:underline;
}

.widgetHeader {
    text-align:right; <--- add this
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}

.widgetHeader {
    display: block;
    text-align: right;
    padding-top:5%;
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}

.widgetHeader {
    max-width: 150px;
    float: right;
    padding-top:5%;
    margin-right:4px;
    font-weight:bold;
    text-decoration:underline;
}