JSFiddle - React, Tailwind, and code Playground

by Konstantin Trunov

HTML

<div class="container">
  <ul class="menu">
    <li><a href="#">TEST</a></li>
    <li><a href="#">TESTING</a></li>
    <li><a href="#">ITEM</a></li>
    <li><a href="#">NEW & ITEM</a></li>
    <li><a href="#">ITEM</a></li>
    <li><a href="#">ITEM AGAIN</a></li>
    <li><a href="#">LOL</a></li>
  </ul>

  <div class="info">
    <div>Window width: <span id="width"></span></div>
    <div>Current padding: <span id="padd"></span></div>
  </div>
  <div class="resize">RESIZE WINDOW!</div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.container {
  background: #1C90F3;
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  
   .menu {
     background: #fff;
     margin: 0 10px;
       &::after {
          content: '';
          clear: both;
          display: table;
       }
       li {
       float: left;
       display: block;
       cursor: pointer;
       &:hover {
         background: #c50010;
         
         & a {
           color: #fff;
         }
       }
       }
     a {
       display: block;
       font-size: 16px;
       color: #000;
       text-decoration: none;
       }
     }
     
     .info {
       background: #fff;
       width: 30%;
       position: absolute;
       bottom:0;
       right:0;
     }
     
     .resize {
       position: absolute;
       font-size: 40px;
       top: 50%;
       width: 100%;
       text-align: center;
       color: #fff;
     }
  }

JavaScript

function autoPadding() {
var menu = $('.menu').width();
$('#width').text(menu);



var test = []
$('.menu li a').each(function() {
  var a = $(this).width();
  test.push(a);
})

var sum = 0;
for (var i = 0; i < test.length; i++) {
  sum = sum + parseFloat(test[i]);

}

var minus = menu - sum;
var padd = (minus / test.length) / 2

$('.menu li').css('padding', '10px ' + parseFloat(padd) + 'px');
$('#padd').text(padd);
}

autoPadding();

$(window).resize (function() {
	autoPadding();
});