li wrap around floating medal

by Stephane de Luca

HTML

<div class="medal">
	<div style="position:absolute; bottom:4px; width: 100%; text-align: center">BBCH&nbsp;: 16-19</div>
</div>

<section>
    <h1>This is the main title</h1>
    <p>The first parapgraph.</p>

    <h1>This is the second title</h1>
    <p>The first parapgraph.</p>
    
    <h1>Links</h1>
    <ul class="columns">
        <li>1st items</li>
        <li>2nd items</li>
        <li>3rd items</li>
        <li>4th items</li>
        <li>5th items</li>
    </ul>
</section>

CSS

* {
    font-family: sans-serif;
}

.medal {
    float: right;
    width: 200px;
    height: 100px;
    background-color: lightgray;
}

.columns>li {
    display: inline-block;
    margin-right: .5cm;
}

.columns>li:before {
    content: 'o ';
}