<div class="details-wrap">
  <details class="faux-select">
    <summary>Select ....</summary>
    <fieldset>
      <div><label><input type="checkbox">checkbox1</label> <input type="number"></div>
      <div><label><input type="checkbox">checkbox2</label> <input type="number"></div>
      <div><label><input type="checkbox">checkbox3</label> <input type="number"></div>
      </fildset>
  </details>
</div>
<p>following content</p>

html,
body {
  margin: 0;
  padding: 0;
}
p {
  padding: 1rem;
}
.details-wrap {
  height: 40px;
}
.faux-select {
  width: 20%;
  mx-width: 350px;
  min-width: 200px;
  margin: 15px;
  box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);
  border: 1px solid #000;
  padding: 10px;
  background: #fff;
  z-index: 99;
  position: relative;
}

.faux-select summary {
  display: block;
  position: relative;
}
.faux-select summary:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(135deg);
  transition: 0.5s ease;
}
.faux-select[open] summary:after {
  transform: rotate(-45deg);
}
.faux-select div {
  padding: 10px 10px 0;
  display: flex;
  align-items: center;
}
.faux-select fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.faux-select input[type="number"] {
  width: 50px;
  margin-left: auto;
}