Two divs in the same row (in a arrow shaped parent div) with text in one div getting clipped based on the width of second div <p>Here is a <a href="http://jsfiddle.net/SxZGE/" rel="nofollow">jsfiddle link of my issue</a></p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="Right green"&gt; &lt;h2&gt; &lt;div class="number colorV"&gt; 8.123456 &lt;/div&gt; &lt;div id="text"&gt; huh-fjiuetie&lt;/div&gt; &lt;/h2&gt; &lt;div class="Right-after green-after"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Conditions are:</p> <ol> <li>The two <code>div</code>'s inside the <code>h2</code> tag have to be on the same line.</li> <li>The div with the class `.number. must be flexible, its content is variable.</li> <li>The content in the <code>.text</code> div gets clipped based on the content in the number div (widths cannot be fixed as the content in the number div is dynamically generated)</li> <li>The background color is also not fixed (hence we cannot fix background-color to the number div in order to do as required)</li> </ol> <p>Any suggestion would be appreciated.</p>