JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="btn-test">
Test
</button>
<button class="btn-check">
Check
</button>
<main id="withoutFlex">
  <section>
     test 0
  </section>
  <section>
     test 1
  </section>
  <section>
     test 2
  </section>
  <section>
     test 3
  </section>
</main>
<main id="withFlex">
  <section>
     test 4
  </section>
  <section>
     test 5
  </section>
  <section>
     test 6
  </section>
  <section>
     test 7
  </section>
</main>
<output></output>

CSS

main{
  display: flex;
  flex-direction: row;
  background-color: grey;
}
#withFlex > section{
 flex: 1;
}
section:nth-child(1){
   background-color: red;
}
section:nth-child(2){
   background-color: blue;
}
section:nth-child(3){
   background-color: green;
}
section:nth-child(4){
   background-color: yellow;
}

JavaScript

$(function(){
  	$('.btn-test').on('click', function(){
    var p = "";
			$('section').each(function(index, value){
				p += "Section " + index + ": " + $(this).outerWidth() + " px<br>";
        
   	  	 if (!$(this).is(':first-child')) {
						$(this).css('margin-left', -$(this).outerWidth());
					}
          
				});
       $('output').html(p);
		});
    $('.btn-check').on('click', function(){
    	var p = "";
			$('section').each(function(index, value){
				p += "Section " + index + ": " + $(this).outerWidth() + " px<br>";
        });
       $('output').html(p);
		});
    
});