Happylent Label 1.0

by paulftw

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="outer">
    <h1>Happylent</h1>
    <h2>
        Ingredients:
    </h2>
    <span>
    Seeds (Chia Seeds, Sunflower Seeds),
    Raw Coconut Sugar,
    Cocoa Powder,
    Hazelnuts, Peanuts,
    Basil,
    Spearmint,
    Paprika,
    Soy Lecithin,
    Iodised Salt,
    Amla Churna
    </span>
<table class="nip table table-bordered">
            <tbody><tr>
                <td style="width: 20%" colspan=2>Servings per package:</td>
                <td style="width: 10%">1</td>
                
            </tr>
            <tr class="sec-end">
                <td colspan=2>Serving size:</td>
                <td>103 g</td>
            </tr>
            <tr class="sec-start sec-end">
                <td></td>
                <td>Average Quantity per Serving</td>
                <td>Average Quantity per 100 g</td>
            </tr>
            <tr>
                <td>Energy</td>
                <td>2100 kJ</td>
                <td>2030 kJ</td>
            </tr>
            <tr>
                <td>Protein</td>
                <td>16.5 g</td>
                <td>16.0 g</td>
            </tr>
            <tr>
                <td>Fat, total</td>
                <td>34.7 g</td>
                <td>33.7 g</td>
            </tr>
            <tr>
                <td>- saturated</td>
                <td>4.1 g</td>
                <td>4.0 g</td>
            </tr>
            <tr>
                <td>Carbohydrate</td>
                <td>30.8 g</td>
                <td>29.9 g</td>
            </tr>
            <tr>
                <td>- sugars</td>
                <td>20.5 g</td>
                <td>19.9 g</td>
            </tr>
            <tr>
                <td>Sodium</td>
                <td>442 mg</td>
                <td>430 mg</td>
            </tr>
          </tbody></table>
</div>

CSS

body {
    margin: 0;
}

.outer {
    border: 1px dashed #f5f5f5;
    width: 55mm;
    height: 100mm;

    height: 55mm;
    width: 100mm;
    
    text-align: center;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
    
    font-size: 2mm;
}

.outer table.table td {
    padding: 0;
}

.outer h1 {
    font-size: 6mm;
    margin: 0 0 1mm;
}
.outer h2 {
    font-size: 4mm;
    margin: 0 0 0.5mm;
    display: inline-block;
    text-align: left;
}


.outer table {
    text-align: left;
    position: absolute;
    bottom: 0.05mm;
    margin-bottom: 0;
}

table.nip.table-bordered td {
    border-top-width: 0;
    border-bottom-width: 0;
}

table.nip.table-bordered tr.sec-start td {
    border-top-width: 1px;
}

table.nip.table-bordered tr.sec-end td {
    border-bottom-width: 1px;
}