pyonpyon-1

jsdoit.css

*{
    font-family: serif;
}

#top{
    display: table;
}

ul{
    display: inline;    
}
li{
    display: table-row;
}
div, meter{
    display: table-cell;
}
meter{
    margin-left: 1em;
}

jsdoit.html

<ul id="top">
    <li><div>つらい作業</div><meter value="0.5"></meter>
        <ul>
            <li><div>つらかった作業</div><meter value="1"></meter></li>
            <li><div>つらい作業</div><meter value="0.5"></meter></li>
            <li><div>つらそうな作業</div><meter value="0"></meter></li>
        </ul>
    </li>
    <li><div>恐らくやるだけな作業</div><meter value="0.33"></meter>
        <ul>
            <li><div>やるだけ</div><meter value="1"></meter></li>
            <li><div>多分すぐ終わりそうな作業</div><meter value="0"></meter></li>
            <li><div>終わってくれることを強く信じている作業</div><meter value="0"></meter>
                <ul>
                    <li><div>作業A</div><meter value="0"></meter></li>
                    <li><div>作業B</div><meter value="0"></meter></li>
                    <li><div>作業C</div><meter value="0"></meter></li>
                    <li><div>作業D</div><meter value="0"></meter></li>
                    <li><div>作業E</div><meter value="0"></meter></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>