Ellipsis left, text-based width right

by vincentpace

HTML

<br /><br />
<div class="table">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="right">Lorem ipsum</div>
</div>

<!-- <div id="right-width"></div> -->

CSS

.table {
    /* background: red; */
    display: table;
    width: 100%;
}

.left, .right {
    display: table-cell;
    padding: 0 5px 0 5px;
    
    /* Ellipsis in table: http://bit.ly/1Q5zxLW */
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left {
    background: green;
}

.right {
    background: yellow;
    text-align: center;
}

JavaScript

// http://stackoverflow.com/a/15302051/1652620
// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('.right').on('input', function() {
    var $width = $(this).textWidth();			// Get width of text
    $width += 10;								// Add left and right padding
    $(this).width($width);						// Set width
    // $('#'+this.id+'-width').html($width);	// Show width in HTML
}).trigger('input');