JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<div id="sweden">
            <dl>
                <dt>Stockholm</dt>
                <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" 
                   alt="Gamla Stan" /></dd>    
                <dd>This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan. 
                    This was taken in Gamla Stan. This was taken in Gamla Stan</dd>
            </dl>
        </div>

CSS

body
            {
                font-family:Arial, sans-serif;
                font-size:small;
                padding:0;
                margin:0;
            }

            #sweden
            {
                float:left;
                width:300px;
                padding:10px 0;
                border:2px solid #C8CDD2;
            }

            #sweden dl /* block element */
            {
                float:left;
                margin:10px 20px;
                padding:0;
            }

            #sweden dt   /* block element */
            {
                float:right;
                width:162px;
                margin:0;
                padding:0;
                font-size:130%;
                letter-spacing:1px;
                color:#627081;
                background:blue;
            }

            #sweden dd
            {
                padding:0;
                margin:0 0 0 98px; /*Keep text lined up in a column */
                font-size:85%;  
                line-height:1.5em;
                color:#666;
                background:red;
            }

            #sweden dl dd.img
            {
                margin:0;
                padding:0;
            }

            #sweden dd.img img
            {
                float:left;
                margin: 0 8px 0 0;
                padding:4px;
                border:1px solid #D9E0E6;
                border-bottom-color:#C8CDD2;
                border-right-color:#C8CDD2;
                background:#fff;
            }