JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div id="wrap">
    <div class="left">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    <div id="right">
    <div class="block">
        <div class="one">one hello how are you this needs to wrap oh there we go looky at that hello i am getting really long</div>
        <div class="two">two <br />two</div>
        <div class="three">three</div>
    </div>
     <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
         <div class="three">three<br />hehehe<br />three</div>
    </div>
     <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
        <div class="block">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
    </div>
</div>

CSS

#wrap {margin: 0 auto;max-width: 800px;border: 4px solid green;}


.left {position:fixed; width: 196px; background: blue; color:white;border-right:4px solid yellow;}

#right {margin-left: 200px;  overflow: auto; white-space: nowrap;}

.block {width: 100px; display: inline-block; background:orange; vertical-align: top;}
.block:nth-of-type(even) {background: red;}

.one, .two{border-bottom: 1px solid white;}

.block div {white-space: normal;}

JavaScript

$(document).ready(function(){

    
        $('#wrap').each(function(){  
            
            var highestBox = 0;
            $('.one', this).each(function(){
            
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            
            $('.one',this).height(highestBox);
            
        
    });    
    
        
        $('#wrap').each(function(){  
            
            var highestBox = 0;
            $('.two', this).each(function(){
            
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            
            $('.two',this).height(highestBox);
            
        
    });    
        $('#wrap').each(function(){  
            
            var highestBox = 0;
            $('.three', this).each(function(){
            
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            
            $('.three',this).height(highestBox);
            
        
    });   
    
   

});