How to put a drop-down list under the buttons-CodePudding

How can I align drop down list under the button ? Now I have two buttons ![buttons][1] and I would like to put two lists under the buttons but it looks like that ![Image1][2] or like that ![Image2][3].

CodePudding user response：

You can use flexbox to create a grid like functionality to keep everything simple and organized.
I've commented the CSS you need to remove.
Learn more about flex from here and make a great app:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.row {
  width: 100%;
  display: flex;
  gap: 20px;
}
.col {
  flex-grow: 1;
}
.menubutton {
  background-color: rgb(216, 213, 210);
  /* width: 30%; */
  text-align: center;
  padding: 10px;
  cursor: pointer;
  /* float: left; */
  /* margin-left: 5px; */
  margin-top: 20px;
  font-size: 25px;
  color: rgb(7, 0, 0);
  border-radius: 5px;
  border: 3px solid gray;
}
.mainmenu {
  text-align: center;
  /* width: 25%; */
  background-color: transparent;
  color: rgb(17, 15, 15);
  /* float: left; */
}

<div class="row">
  <div class="col">
    <div id="show-humidity-button" class="menubutton">Hide Humidity</div>

    <div id="show-humidity" class="mainmenu">
      <div id="panel-humidity1" style="height: auto;" class="panel">List</div>
    </div>
  </div>
  <div class="col">
    <div id="show-temperature-button" class="menubutton">Hide Temperature</div>
    <div id="show-temperature" class="mainmenu">
      <div id="panel-44" style="height: auto;" class="panel">List</div>
    </div>
  </div>
</div>