CartoDB visual w/ two independent value ranges in legend

<!-- CartoDB choropleth + bubble visualization legend -->
<!-- see http://gis.stackexchange.com/q/148500/52380 -->

<div class="legend-title">Plätze und Belegung</div>
<div class='cartodb-legend bubble' style="margin-bottom:20px">
<!-- setting a margin-bottom value is necessary to keep the two divs from overlapping -->
<ul>
    <li>
        125
    </li>
    <li style="background: rgb(184, 22, 9) none repeat scroll 0% 0%;" class="graph">
        <div class="bubbles"></div>
    </li>
    <li>
        1300
    </li>
</ul>
</div>
<div class='cartodb-legend choropleth'>
<ul>
    <li class="min">
        0.58
    </li>
    <li class="max">
        1.43
    </li>
    <li class="graph count_441">
    <div class="colors">
        <div class="quartile" style="background-color:#FFFFB2"></div>
        <div class="quartile" style="background-color:#FED976"></div>
        <div class="quartile" style="background-color:#FEB24C"></div>
        <div class="quartile" style="background-color:#FD8D3C"></div>
        <div class="quartile" style="background-color:#FC4E2A"></div>
        <div class="quartile" style="background-color:#E31A1C"></div>
            <div class="quartile" style="background-color:#B10026"></div>
    </div>
    </li>
</ul>
</div>