JSFiddle - React, Tailwind, and code Playground

by noducks

HTML

<div class="well">
                    <h2><i class="icon-align-justify"></i>&nbsp;&nbsp;<i
                            contenteditable="true">Myocardial Infarction</i>
                    </h2>

                    <br>

                    <div class="qa-container">

                        <div class="qa-letter">
                            <a href=""><i class="icon-plus-sign-alt"></i></a>
                        </div>

                        <div class="card-header-thumb"><img
                                src="http://node4.bbcimg.co.uk/iplayer/images/clip/p00fhzb4_128_72.jpg"/><br><br><img
                                src="http://node2.bbcimg.co.uk/iplayer/images/clip/p00fjpqv_128_72.jpg"/></div>

                        <div class="qa-content">
                            <h5 contenteditable="true">Definition</h5>




                            <p contenteditable="true"> destruction of heart
                                tissue
                                resulting from obstruction of the blood supply
                                to
                                the heart
                            </p>
                        </div>
                    </div>


                    <div class="clear"></div>


                    <h5><a href=""><i class="icon-plus-sign-alt"></i>&nbsp;&nbsp;Signs</a>
                    </h5>


                    <h5><a href=""><i class="icon-plus-sign-alt"></i>&nbsp;&nbsp;Pathogenesis</a>
                    </h5>
                    <h5><a href=""><i class="icon-plus-sign-alt"></i>&nbsp;&nbsp;Differential
                        Diagnosis</a></h5>

                    <img class="round-thumb" src="images/128x72b.jpg"/><br><br>


                    - Aortic Dissection <br>
                    - Cardiac Tamponade <br>
                    - Tension Pneumothorax <br>
                    - Tietze's Syndrome <br>
                </div>

CSS

.card-header-thumb {
    float: right;
    width: 128px;
    /*height: 320px;*/
    position: relative;
    top: 5px;
    right: 5px;
    margin-left: 15px;
}


.qa-container {
    margin: 0px 0px;
    /*overflow: auto*/
}
.qa-letter{
    float: left;
    padding: 0px 0px;
    width: 10px;
    height: 170px;
}
.qa-content {

    margin-left: 20px;
}
.qa-thumb img {
    display: block;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    border-color: #AAAAAA;

}

.thumb {
    margin-left: 138px;
}

.round-thumb {
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    border-color: #AAAAAA;

}

.answer {
    margin-left: 00px;
}


hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #ffffff;
}


.clear
{
    clear:both;
}