JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<div id="coolio">
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
</div>
<p>Wrapp witdh: <span id="wrapper-width">&nbsp;</span></p>

CSS

#coolio{width:640px; outline:1px solid red; height:200px;}
.album{width:150px; float:left; margin:5px;}
.album img{width:100%;}

JavaScript

$('#wrapper-width').text($('.coolio').width());