Making a dropdown of checkboxes via pure CSS with angular

I am trying to make a dropdown of checkboxes with angular without using third party library.

    <div class="label-wrapper">
        <label>
            Filter By:
        </label>
    </div>

    <div class="dropdown-wrapper">
        <input type="text" placeholder="filterCtrl.myInput" ng-focus="inputFocus(true)" ng-blur="inputFocus(false)">
        <ul 
          class="multi-checkbox-dropdown" 
          ng-focus="dropdownFocus(true)" 
          ng-blur="dropdownFocus(false)" 
          ng-if="filterCtrl.dropDownInputFocus">

         <li ng-repeat="value in filterCtrl.filterList">
          <input type="checkbox" value="value.name" ng-model="filterCtrl.filterValue2[value.name]"/>
          {{value.name}}
         </li>
        </ul>
    </div>

Here is what it looks like when the dropdown is clicked

Here is what it looks like when the dropdown is not clicked

Here is what I would like it to look like using css

I am confused on

1. How to make a wrapper container that wraps around the ul such that it overlays on top of the element that it overflows?
2. How to make the Filter By: label not push down by the ul ?

Any help would be appreciated. Thanks