JSFiddle - React, Tailwind, and code Playground

by mrmayfield

HTML

<div class="eco-alternating-sections">


  <div class="eco-alternate-section">
    <div class="eco-left-section">
        <p>Hello</p>
    </div>
    <div class="eco-right-section">
        <p>Hello</p>
    </div>
  </div>

      <div class="eco-alternate-section">
    <div class="eco-left-section">
        <p>Hello</p>
    </div>
    <div class="eco-right-section">
        <p>Hello</p>
    </div>
  </div>

      <div class="eco-alternate-section">
    <div class="eco-left-section">
        <p>Hello</p>
    </div>
    <div class="eco-right-section">
        <p>Hello</p>
    </div>
  </div>

      <div class="eco-alternate-section">
    <div class="eco-left-section">
        <p>Hello</p>
    </div>
    <div class="eco-right-section">
        <p>Hello</p>
    </div>
  </div>

    


</div>

CSS

.eco-alternate-section{
    width: 200px;
    height: 200px;
    background-color: blue;
    color: white;
}

.eco-left-section{
    background-color: green;
    width: 33%;
}

.eco-right-section{
    background-color: purple;
}
}

JavaScript

$( ".eco-alternate-section:even").find('.eco-left-section').css({"float": "left", "width": "33%"});

 $( ".eco-alternate-section:even").find('.eco-right-section').css({"float": "left", "width": "66%"});

 $( ".eco-alternate-section:odd").find('.eco-left-section').css({"float": "left", "width": "66%"});

 $( ".eco-alternate-section:odd").find('.eco-right-section').css({"float": "left", "width": "33%"});