JSFiddle - React, Tailwind, and code Playground

by ChaseMoskal

HTML

<table>
  <tr>
    <td class="one">
      <ul>
        <li>fasdf</li>
        <li>asgasdf</li>
        <li>afdsaggrea</li>
        <li>asgasdf</li>
        <li>afdsaggrea</li>
      </ul>
    </td>
    <td class="two">
      <div class="three">
        First div
        <div>Second div</div>
      </div>
    </td>
  </tr>
</table>

CSS

.one{
    background-color:red;
}
.two{
    background-color:yellow;
}
.three{
    background-color:green;
}

JavaScript

var tableCritter = new function TableCritter(){
  var critter=this;
  var $window = $(window);
  var $two = critter.$two = $('.two');
  var $three = critter.$three = $('.three');

  function adjustHeight(){
    $three.css({ height:$two.height() });
  }; 
  adjustHeight();
  $window.on('resize',adjustHeight);
  
  critter.stop = function(){
    $window.off('resize',adjustHeight);
  };
};