JSFiddle - React, Tailwind, and code Playground

by Yerko Palma

HTML

<div class="smart-art clearfix">
    <div class="list-block">
        <div class="list-block-inner">
            <h2>Even more text</h2>
            <ul>
                <li>C1</li>
                <li>C2</li>
            </ul>
        </div>
    </div>
</div>

SCSS

.clearfix{
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.smart-art {    
    display: block;
    width: 80%;
    margin: 0 auto;
    background-color: #eee;
    padding: 2%;
    
    .list-block {
        background: #fff;
        font-size: 1.3em;        
        border-color: #337ab7;
        border-width: 2px;
        border-style: solid;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        float: right;
        width: 65%;
        h2 {
            display: inline-block;
            float: left;
            font-size: 1.2em;
        }
        ul {
            display: inline-block;
        }
        .list-block-inner {
            padding: 2%;
        }
    }
}