How to make adjustable divider lines with word beside it in email html?

I need to make an adjust line with word beside, while my code keep make the words jump into two lines if the words are too long. I want is just to keep in one line and the left line get narrowed, and I need the text area to be flexible so that I can either enter smaller word or a sentence.

my result normal one , longer text

code below

css

.label-border-gray { border-top: 1px solid #333333; }
.label p { 
    font-size: 20px;
    color: #222222;
}
.height10 { height: 10px; font-size: 10px; line-height: 10px; }
img {
    display: block;
    border: 0;
    line-height: 100%;
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
}
.block .img p {
    margin: 0 !important;
}
.flat {
    line-height: 0px;
    font-size: 0px;
}

.flat img {
    line-height: 16px;
    font-size: 12px;
}
.flat p {
    margin: 0px;
    padding: 0px;
}

html

<table style="width:800px;" border="0" cellpadding="0" cellspacing="0" class="block on600-widthfull" align="center">
<tr><th class="height30" colspan="3">&nbsp;</th></tr>
    <tr>
        <th style="width:35px;" class="on600-hide">&nbsp;</th>
        <th class="on600-width80percent on420-hide img flat margin-0" align="left" valign="middle">
            <table width="" border="0" cellpadding="0" cellspacing="0" class="on600-widthfull bg" align="center">
            <tr><th style="width:500px;" class="height10">&nbsp;</th></tr>
            <tr><th style="width:500px;" class="label-border-gray height10">&nbsp;</th></tr>
            </table>
        </th>
        <th class="on600-width50percent on420-widthfull" align="left" valign="middle">
            <table border="0" cellpadding="0" cellspacing="0" align="right">
                <tr>
                    <th style="width: 23px;" align="right" class="img flat">
                        <p><img src="template/icon.png" style="width:20px;"></p>
                    </th>
                    <th style="width: 10px;">&nbsp;</th>
                    <th align="left" class="margin-0 label" valign="middle">
                        <p>Some text here</p>
                    </th>
                </tr>
            </table>
        </th>
        <th style="width:35px;" class="on600-hide">&nbsp;</th>
    </tr>
    <tr><th class="height20" colspan="4">&nbsp;</th></tr>
</table>

Solution

This will keep everything on one line:

<span style="white-space: nowrap; word-break: keep-all !important; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens: none !important;">Lets stick together</span>

It might be overkill for your needs. Add these two and you should be fine:

white-space: nowrap; word-break: keep-all !important;

Good luck.