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

Question

Here is a jsfiddle link of my issue

HTML

<div  class="Right green">
    <h2>
        <div class="number colorV"> 8.123456 </div>
        <div id="text"> huh-fjiuetie</div>
    </h2>
    <div  class="Right-after green-after"></div>
</div>

Conditions are:

1. The two div 's inside the h2 tag have to be on the same line.
2. The div with the class `.number. must be flexible, its content is variable.
3. The content in the .text 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)
4. The background color is also not fixed (hence we cannot fix background-color to the number div in order to do as required)

Any suggestion would be appreciated.

Answer 1

Based on an earlier and related question, you could try the following.

Modify your HTML as follows:

<div class="Right green">
    <div class="table-wrap">
        <div class="text-cell">
            <div class="inner">huh-fjiuetie</div>
        </div>
        <div class="number-cell colorV">8.123456</div>
    </div>
    <div class="Right-after green-after"></div>
</div>

And apply the following CSS:

body {margin: 0;} /* Note: learn about reset style sheets... */

/* The following takes care of the shadow/coloring/arrow styling */
.Right {
    position: relative;
    width: 80%;
    margin-right: 50px;
    margin-top: 4%;
}
.Right-after {
    content:"";
    position:absolute;
    top: 0;
    width: 0;
    border-style: solid;
    border-width: 3.3em 0 3.3em 3.3em;
    right:-3.2em;
}
.colorV {
    color:#dbdcde;
}
.green {
    background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
    border-color: transparent transparent transparent #1d9755;
}

/* The following takes care of the test clipping */
.table-wrap {
    display: table;
    width: 100%;
    height: 200px; /* this may be optional... */
    font-size: 1.00em;
    line-height: 1.50em;
    font-size: 5.0em;
}
.number-cell {
    display: table-cell;
}
.text-cell {
    display: table-cell;
}
.inner {
    height: 1.50em;
    overflow: hidden;
    word-break: break-all;
}

See demo at: http://jsfiddle.net/audetwebdesign/uKryj/

There are two parts to the CSS.

The rules related to .Right and .green take care of the green shadow and arrow motif. This establishes a well-defined block level container.

The div.Right block contains a child block .table-wrap , which will contain the text and number and will take are of the clipping as shown earlier in:

Two divs in the same row with text in one div getting clipped based on the width of second div

The addition child block, .Right-after generates the arrow motif.