JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="sidebar">
    <h4>ingredients</h4>
    <ul class="ingredients list-unstyled">
    <li>eye of newt</li><li>wing of bat</li><li><h6>leaven</h6><ul class="list-unstyled"><li>1 tbsp mature starter this line is really long like really long, mmay guys</li><li>200 g 75° water</li><li>100 g white flour</li><li>100 g whole wheat flour</li></ul></li><li>700 g plus 50 g (27 oz) 80° water</li><li>200 g leaven</li><li>900 g white flour</li><li>100 g whole wheat flour</li><li>20 g salt</li></ul>
</div>

CSS

body {
    color: #333;
    font-family: sans-serif;
}

.sidebar {
    width: 300px;
}
.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sidebar li {
    padding-left: 1em;
    text-indent: -1em;
}

.sidebar ul h6 {
    font-size: 14px;
    margin: 1em 0 0;
}

.sidebar ul > li > ul {
    margin: 0 0 1em -1em;
}