JSFiddle - React, Tailwind, and code Playground

by grendian

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<article class="issue">
    <header>
        <div class="votebox">10</div>
        <div class="title">Issue Title</div>
    </header>
    <section class="solutions">
        <article class="solution">
            <header>
                <div class="votebox">5</div>
                <div class="title">Solution Title</div>
            </header>
            <section class="supporting-arguments">
                <article class="argument">
                    <header>
                        <div class="votebox">3</div>
                        <div class="title">Argument Title</div>
                    </header>
                </article>
            </section>
            <section class="contrary-arguments">
                <article class="argument">
                    <header>
                        <div class="votebox">3</div>
                        <div class="title">Argument Title</div>
                    </header>
                </article>
            </section>
        </article>
    </section>
</article>

CSS

.issue { margin: 1rem; position: relative; font-size: 1.4rem; }
header { height: 2rem; border-radius: 1rem; border: 1px solid #ccc; background: #ddd; }
.votebox { padding: 0 1rem; line-height: 2rem; display: inline-block; }
.title { font-size: 1.8rem; font-weight: 600; display: inline-block; }
.solutions { margin-top: 2rem; }
.solution { border-top: 1px solid #ccc; }
.supporting-arguments { width: 50%; box-sizing: border-box; display: inline-block; }
.contrary-arguments { width: 49%; box-sizing: border-box; display: inline-block; }