JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<div class="album left">
    <div class="info">
        <img src="http://image.ohozaa.com/i/45f/bzDNm.jpg">
        <div class="description">
            <h2>Yuru Yuri Op</h2>
            <h3>Yuruyurarararayuruyuri Daijiken</h3>
            <dl>
                <dt>Release year:</dt>
                    <dd>July 20, 2011</dd>
                <dt>Record Label:</dt>
                    <dd>Pony Canyon</dd>
                <dt>Bitrate:</dt>
                    <dd>256 kbps(CD)</dd>
                <dt>Catalog Number:</dt>
                    <dd>PCCG-1197</dd>
                <dt>Ripper:</dt>
                    <dd><a href="http://www.anime-sharing.com">Anime-Sharing Lossless</a></dd>
            </dl>
        </div>
    </div>
    <hr class="sep">
    <ol class="tracks">
        <h3>Song list:</h3>
        <li>Yuyurarararayuruyuri Daijiken</li>
        <li>Yuruyuri I&hearts;U</li>
        <li>Yuyurarararayuruyuri Daijiken (Karaoke)</li>
        <li>Yuruyuri I&hearts;U (Karaoke)</li>
    </ol>
</div>
<div class="album right">
    <div class="info">
        <img src="http://4.bp.blogspot.com/-6I1yiOGZCjU/TiodVky08wI/AAAAAAAAApg/7enfOS0Q7K8/s1600/Yuru+Yuri+ED+Single+-+My+Pace+de+Ikimashou.jpg">
        <div class="description">
            <h2>Yuru Yuri ED</h2>
            <h3>Yuruyurarararayuruyuri Daijiken</h3>
            <dl>
                <dt>Release year:</dt>
                    <dd>July 20, 2011</dd>
                <dt>Record Label:</dt>
                    <dd>Pony Canyon</dd>
                <dt>Bitrate:</dt>
                    <dd>256 kbps(CD)</dd>
                <dt>Catalog Number:</dt>
                    <dd>PCCG-1197</dd>
                <dt>Ripper:</dt>
                    <dd><a href="http://www.anime-sharing.com#haven'tsd">Anime-Sharing Lossless</a></dd>
            </dl>
        </div>
    </div>
    <hr class="sep">
    <ol class="tracks">
        <h3>Song list:</h3>
        <li>My Pace de Ikimashou</li>
        <li>Precious Friends</li>
    ...

CSS

body {
    width: 950px;
    /*border: 1px solid black;*/
    color: #444;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.2;
    text-shadow: 0 1px #ccc;
    background-color: #666;
    z-index: -6;
    position: relative;
    /*background-image: -webkit-radial-gradient(cover, #D0D0D0 0%, #aaa 100%);
    background-image: -moz-radial-gradient(farthest-side, #D0D0D0 0%, #888 100%);
    background-image: -ms-radial-gradient(farthest-side, #D0D0D0 0%, #888 100%);
    background-image: -o-radial-gradient(farthest-side, #D0D0D0 0%, #888 100%);
    background-image: radial-gradient(farthest-side, #D0D0D0 0%, #888 100%);*/
}
a {
    color: #0c83e5;
    text-shadow: 0 1px #ddd;
}
a:visited, a:hover, a:active {
    color: #50adf7;
}
h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
    font-family: Garamond, serif;
    color: #555;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 18px;
    margin: -6px 0 0 14px;
}
.album {
    display: inline-block;
    /*height: 320px;*/
    position: relative;
    margin-bottom: 32px;
    z-index: -6;
    vertical-align: top
}
.album img{
    width: 300px;
    height: 320px;
    border: 1px solid #ccc;
    z-index: 5;
    position: relative;
}
.info {
    position: relative;
    z-index: -6;
}
.info:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.description {
    width: 280px;
    padding: 5px 8px;
    border: 1px solid #999;
    z-index: -5;
}
.left img, .left .description {
    float: left;
}
.left img{
    box-shadow: 4px -2px 10px -8px black, 0px 5px 10px -8px black;
}
.left .description {
    /*border: 1px solid red;*/
    background-color: /*#ddf2f2*/#eee;
    border-left: none;
    /*margin-right: 39px; /* 950px - 2*300px - 280px - 16px*/
    margin-right: 45px; /* 950px - 2*302px - 280px - 20px wtf i don't even this 20px 
        and minus 1 more pixel, otherwise in ie 9 it is too wide in the container for some reason...