JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="wrapper">
<li class="rightsidebar">uygyugytgygyug</li>
<li class="content">
    феерически огромный div
    Доброго времени суток, уважаемые форумчане.
Положение:
Есть div A с определенной шириной, в нём расположены 3 div'а. 1-й div(определенной ширины) float'ом прижат к левому краю. 3-й div(определенной ширины) float'ом прижат к правому краю. а второй div расположен между 1 и 3.
Вопрос: Как сделать так чтобы 2-й div заполнял оставшееся свободное пространство по ширине? </li>
</ul>

CSS

.rightsidebar {
    float:right;
    width:100px;
    background:green;  
}

.content {   
 margin-right: 100px; 
    
background:yellow;
}