JSFiddle - React, Tailwind, and code Playground

by iamthestig

HTML

<body>
    <div id="container">
         <div id="panel-left" class="panel">
         <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg" id="left-img" />
         </div> 
         <div id="panel-center" class="panel">
         <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg" id="center-img" />
         </div>
         <div id="panel-right" class="panel">
         <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg" id="right-img" />
         </div>
    </div>
</body>

CSS

* {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    }
#container {
    width: auto;
    }
    .panel {
    float: left;
}

JavaScript

$(window).load(function() {
    $('#panel-left').each(function() {
       $(this).width($(this).find('#left-img').width());
    });
    $('#panel-center').each(function() {
       $(this).width($(this).find('#center-img').width());
    });
    $('#panel-right').each(function() {
       $(this).width($(this).find('#right-img').width());
    });
    //Script that will add all the panels width and apply it to the container's width.
});