JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<div id="container">
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>
    <div class="horizontal">Here is an item in the list</div>

</div>
<div id="controls">
    <input type="button" id="toggleAlign" value="Toggle List Alignment">
</div>

CSS

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 30em;
  height: 40em;
  background-color: darkgrey;
  overflow: hidden;
}
div.horizontal {
  margin: 0.5em;
  width: 96%;
  height: 2em;
  background-color: lightblue;
  float: top;
  line-height: 2em;
  overflow: hidden;
}

div.vertical {
  width: 4em;
  margin: 0.5em;
  height: 90%;
  background-color: lightgreen;
  float: left;
  overflow: hidden;    
}

#controls {
  width: 10em;
  padding: 2em;
  float: right;    
}

JavaScript

$(document).ready(function(e) {
    var align = "h";
    toggleAlign = function() {
        if (align == "h") {
            $('.horizontal').addClass('vertical').removeClass('horizontal');
            align = "v";
        } else {
            $('.vertical').addClass('horizontal').removeClass('vertical');
            align = "h";
        }
    }
    $('#toggleAlign').click(toggleAlign);
});