JSFiddle - React, Tailwind, and code Playground

HTML

I got this:
<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    500px
</div>

I need this:<br />
<img src="http://i46.tinypic.com/zoeqrt.png" />

CSS

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    display:inline-block;
    width:100%; 
    height:200px;
    border:1px solid blue;
    color:blue;
}

DIV#c1 {
    width:100%;
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    width:100%;
    border:1px dotted blue;    
}

DIV#c3 {
    width:100%;
    border:1px dotted blue;   
    color:blue;
}