JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="row" data-role="floating-columns">
  <div class="col" data-role="column">
    <div class="box"></div>
  </div>
  <div class="col" data-role="column">
    <div class="box"></div>
  </div>
</div>

CSS

body {
  padding: 5%;
}

.row {
  display: flex;
}

.col {
  flex: 1;
  flex-basis: 50%;
  padding: 0 15px;
  width: 50%;
  transition: all 0.2s ease;
}

.box {
  height: 20px;
  background: #333;
}

JavaScript

$('[data-role=floating-columns]')
  .on('mouseover', '[data-role=column]', function() {
    var $column = $(this),
      $columnOhter = $column.closest('[data-role=floating-columns]').find('[data-role=column]').not($column);

    $column
      .css({
        'width': '20%',
        'flex-basis': '20%'
      });
  })
  .on('mouseout', function() {
    var $columns = $(this).find('[data-role=column]');

    $columns.each(function() {
      $(this).css({
        'width': '50%',
        'flex-basis': '50%'

      })
    })
  })