JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div class="container">
<div class="li">Left item</div>
<div class="ri">Right item</div>
    <br class="cls" />
</div>
<div class="container">
<div class="li">Left item Left itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itememLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft itemLeft item</div>
<div class="ri">Right item</div>
        <br class="cls" />
</div>
<div class="container">
<div class="li">Left item</div>
<div class="ri">Right item</div>
        <br class="cls" />
</div>

CSS

.container{
    min-width:200px;
    width:100%;
    height:40px;
}
.container div{
    height:inherit;
}

.li{
    min-width:20%;
    max-width:60%;
    text-overflow:ellipsis;
    overflow:hidden;
    float:left;
    background-color:blue;
    white-space:nowrap;
}
.ri{
    min-width:40%;
    max-width:80%;
    text-overflow:ellipsis;
    overflow:none;
    background-color:red;
float:right;
}
.cls{clear:both;}

JavaScript

//though it still kinds of fail to show all of the text in blue boxes and also if you do .li:hover{height:auto;} things go out of the hand.
//so we need some thing dynamic here
// OR
//so I think
$(function() {
    $('.li').hover(function() {
        $(this).css({'white-space':'normal','min-height':'40px','height':'auto'});
        var H = $(this).css('height');
        $(this).siblings('.ri').css('height', H);
    },function(){
        $(this).parent().children().css('height', '40px');
    });
});