JSFiddle - React, Tailwind, and code Playground

by st3redstripe

HTML

<html>
    <head>
    </head>
    <body>
        
        <div id="container">
            
            <!-- Start Tabs Wrapper -->
            <div id="tab_wrapper">
                
                <!-- Tab Container -->
                <div id="tab_container">
                    
                    <!-- Start Artist Block Wrapper -->
                    <div class="artist_block_wrapper">
                        
                        <!-- Start Artist Block -->
                        <div class="artist_block">
                            <div class="artist_header">
                                <h2>Artist 1</h2>
                                <div class="clear"></div>
                            </div>
                            <table cellpadding="0px" cellspacing="0px">
                                <tr><td>Row 1</td></tr>
                                <tr><td>Row 2</td></tr>
                            </table>
                        </div>
                        <!-- End Artist Block -->
                        
                        <!-- Start Artist Block -->
                        <div class="artist_block">
                            <div class="artist_header">
                                <h2>Artist 2</h2>
                            </div>
                            <table cellpadding="0px" cellspacing="0px">
                                <tr><td>Row 1</td></tr>
                                <tr><td>Row 2</td></tr>
                            </table>
                        </div>
                        <!-- End Artist Block -->
                        
                        <!-- End Artist Block Wrapper -->
                    </div>
                    
                    The block below should be stacked up next to the one above
                    and hence be invisible!
                    
                    <!-- Start Artist Block Wrapper -->
                    <div class="artist_block_wrapper">
               ...

CSS

/* Page Reset */
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    margin:0;
    padding:0;
}

body{
    background-color:#b1b7be;    
}

.clear{
    clear:both;
}

div#logo{
    background-image:url('img/tabbr_logo.png');
    background-repeat:no-repeat;
    height:24px;
    width:88px;
}

div#container{
    width:510px;
    margin:0px auto;
}

div#tab_wrapper{
    width:510px;
    height: auto;
    overflow:hidden;
}

div#tab_container{
    float:left;
    display:inline;
}

div.artist_block_wrapper{
    width:510px;
    float:left; /* Not working! Artist 3 and 4 should float next to artist 1 and 2 */
    background-color:lightblue;
}

div.artist_block{
    width:510px;
}

div.artist_header{
    width:470px;
    height:22px;
    background-color:#282828;
    padding:18px;
    padding-left:20px;
    padding-right:20px;
}

div.artist_header h2{
    float:left;
    
    color:#d1d1d1;
    font-family:"Lucida Grande", Tahoma, Arial;
    font-size:17px;
    font-weight:normal;
}

div.artist_header h3{
    float:right;
    color:#878787;
    font-family:"Lucida Grande",Tahoma, Arial;
    font-size:10px;
    font-weight:bold;
    margin-top:4px;
}

div.artist_block table{
    width:510px;
}

div.artist_block table tr{
    height:50px;
    
}