focus-within css not working for html label

I'm trying to build a dropdown list with checkboxes in dropdown area.

Here is the code I'm using:

.search-box {
  color: black;
  width: 450px;
}

.search-box .fake-tb {
  display: flex;
  flex-wrap: nowrap;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 2px 5px;
  margin: auto;
  height: 35px;
  max-width: 700px;
}

.search-box .fake-tb * {
  border: 0 !important;
  height: auto !important;
}

.search-box .fake-tb input[type=search] {
  border-radius: 6px;
  width: 100% !important;
  outline: none;
}

.search-box .fake-tb img {
  vertical-align: middle;
  margin: auto;
  padding: 2px;
}

.search-box .dropdown {
  display: none;
  position: absolute;
  border: 1px solid #e5e5e5;
  cursor: default;
  background: white;
  z-index: 99999;
  text-align: left;
}

.search-box:focus-within .dropdown {
  display: block;
  background-color: white;
  color: black;
}

.search-box .dropdown>table {
  padding: 3px 10px 3px 2px;
  width: 100%;
}

.search-box .dropdown table tr:hover {
  background-color: lightskyblue;
}

<div>line before ...</div>
<div class="search-box">
  <div class="fake-tb">
    <input name="ctl32$txtCusSearch" id="ctl32_txtCusSearch" auto-complete="off" type="search">
    <img src="search.svg" />
  </div>
  <div class="dropdown">
    <table id="ctl32_lstOptions">
      <tbody>
        <tr>
          <td><input id="ctl32_lstOptions_0" name="ctl32$lstOptions$0" type="checkbox" value="Value1"><label for="ctl32_lstOptions_0">Checkbox 1</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_1" name="ctl32$lstOptions$1" type="checkbox" value="Value2"><label for="ctl32_lstOptions_1">Checkbox 2</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_2" name="ctl32$lstOptions$2" type="checkbox" value="Value3"><label for="ctl32_lstOptions_2">Checkbox 3</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_3" name="ctl32$lstOptions$3" type="checkbox" value="Value4"><label for="ctl32_lstOptions_3">Checkbox 4</label></td>
        </tr>
        <tr>
          <td><input id="ctl32_lstOptions_4" name="ctl32$lstOptions$4" type="checkbox" value="Value5"><label for="ctl32_lstOptions_4">Checkbox 5</label></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>line after ...</div>

There are 2 problems I'm struggling with:

1. Clicking on checkbox works fine, but clicking on its label closes the dropdown. How can I keep it open?

2. How do I make the width of dropdown equal to the textbox area, without specifying a fixed width?

I'll prefer a pure CSS solution if possible.