How to Align div's horizontally such as text within gets ellipsed
<p>I have 2 div's which have some text in them. They are encapsulated within a parent Div which has fixed height and width. I want to ellipse the text if they overflow outside the parent div.</p>

<p>Here is my HTML</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;

    .pDiv {
        width:50px;
        height:20px;
        border: 1px  solid red;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .div1 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .div2 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class ='pDiv'&gt;
        &lt;div class ='div1'&gt;test testing&lt;/div&gt;
        &lt;div class ='div2'&gt;test1&lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I want the text to be ellipsed if either the div1 text is long or the div2 text is long.</p>

<p>Any solutions?</p>
