floating label not looking good when multiple select enabled with size

Created by: vnekatesharao

<div class="form-floating" width="50%">
  <select class="form-control" id="floatingSelect" aria-label="Floating label select example" multiple="false" size="5">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
   <option value="4">four</option>
   <option value="5">five</option>
   <option value="6">six</option>
   <option value="7">seven</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

i am using floating label for selecting multiple items with the above snippet. the problem is that the options texts are overriding the label text which doesn't look good when scrolling.

Bug reports must include:

• Operating system and version : Windows
• Browser and version : Chrome Version 87.0.4280.88
• https://codepen.io/venkatdot/pen/qBaoPQo

as you can see the floating label with multiple select options, the option contents are overriding label