JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div id="container">
    <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing massa lacus.</p></div>
    <div id="right"><p>Proin nec enim vel orci pulvinar sollicitudin. Ut semper quam non felis bibendum sit amet dignissim lorem mattis. Suspendisse id posuere magna.</p>
        
        <div id="width100PercentTest"></div>
        
        <p>Maecenas lorem tellus, pellentesque et mattis ac, euismod sed felis. Maecenas fermentum bibendum mattis. Vivamus id vulputate eros. Quisque venenatis commodo augue nec aliquam. In euismod lorem non enim viverra pretium.</p>
    </div>
</div>

<a href="#" id="swap">Swaperoo</a>

CSS

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}

#width100PercentTest {
    width: 100%;
    height: 10px;
    background: yellow
}

JavaScript

$('#swap').click(function() {
    var left = $('#left').html();
    var right = $('#right').html();

    $('#left').html(right);
    $('#right').html(left);

    return false;
});