JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<div class="nutrition-facts">
    <div class="recipe-nutrition-energy-info">
        <h2>Reseptin ravintosisältö</h2>
        <div class="plate"></div>
        <p class="energy">
            <span class="energy-text">Energia</span>
            <span class="energy-amount">104</span>
            <span class="energy-unit">kcal / 100g</span>
        </p>
        <p class="hint">Ravintotiedot ovat suuntaa antavia.</p>
    </div>
    <div class="recipe-nutrition-facts">
        <div class="nutrition-fact cf">
            <div class="nutrition-name">Proteiini</div><div class="nutrition-unit">(g)</div><div class="nutrition-amount">3</div>
        </div>
        <div class="nutrition-fact cf">
            <div class="nutrition-name">Kalsium</div><div class="nutrition-unit">(g)</div><div class="nutrition-amount">3</div>
        </div>        
        <p class="nutrition-info">Ravintosisältö / 100g</p>
    </div>
    <div class="nutrition-graph">
        <img></img>
    </div>
</div>

CSS

.recipe-nutrition-energy-info, .recipe-nutrition-facts, .nutrition-graph {
    width: 33%;
    float: left;
}

.plate {
    float: left;
    width: 50%;
    height: 100px;
    border: 1px solid gray;
    box-sizing: border-box;
}

.energy {
    float: right;
    box-sizing: border-box;
    width: 50%;
}

.energy-text {
    display: block;
    box-sizing: border-box;
    font-size: 80%;
}

.energy-amount {
    display: block;
}

.recipe-nutrition-facts .nutrition-fact:nth-child(even) {
    background-color: #EAF4FF;
}

.nutrition-name {
    margin-right: 0.5em;
}

.nutrition-name, .nutrition-unit {
    float: left;
}

.nutrition-amount {
    float: right;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}