html – Content material Strikes on Opening Choose Dropdown

I need assistance with the Choose Dropdown. It strikes the content material (Whats up World) when opened. I’ve used Radio Enter to pick out the specfic choice when performing a Search. If there may be every other higher resolution for one of these performance, please help.

HTML

<span class="dropdown-el">
    <enter sort="radio" title="sortType" worth="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
    <enter sort="radio" title="sortType" worth="Recognition" id="sort-best"><label for="sort-best">Product Recognition</label>
    <enter sort="radio" title="sortType" worth="PriceIncreasing" id="sort-low"><label for="sort-low">Value Low to Excessive</label>
    <enter sort="radio" title="sortType" worth="PriceDecreasing" id="sort-high"><label for="sort-high">Value Excessive to Low</label>
    <enter sort="radio" title="sortType" worth="ProductBrand" id="sort-brand"><label for="sort-brand">Product Model</label>
    <enter sort="radio" title="sortType" worth="ProductName" id="sort-name"><label for="sort-name">Product Identify</label>
  </span>
<h1> Whats up World</h1>

CSS

physique {
  text-align: middle;
  background: #ebf4fb;
  min-height: 95vh;
  margin: 0;
  padding: 0;
  border-bottom: 5vh strong #3694d7;
  font-family: "Myriad Professional", "Arial", sans;
  font-size: 24px;
}

.dropdown-el {
  margin-top: 20vh;
  min-width: 12em;
  place: relative;
  show: inline-block;
  margin-right: 1em;
  min-height: 2em;
  max-height: 2em;
  overflow: hidden;
  high: 0.5em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  shade: #444;
  define: none;
  border: 0.06em strong clear;
  border-radius: 1em;
  background-color: #cde4f5;
  transition: 0.3s all ease-in-out;
}
.dropdown-el enter:focus + label {
  background: #def;
}
.dropdown-el enter {
  width: 1px;
  top: 1px;
  show: inline-block;
  place: absolute;
  opacity: 0.01;
}
.dropdown-el label {
  border-top: 0.06em strong #d9d9d9;
  show: block;
  top: 2em;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  place: relative;
  transition: 0.3s shade ease-in-out;
}
.dropdown-el label:nth-child(2) {
  margin-top: 2em;
  border-top: 0.06em strong #d9d9d9;
}
.dropdown-el enter:checked + label {
  show: block;
  border-top: none;
  place: absolute;
  high: 0;
  width: 100%;
}
.dropdown-el enter:checked + label:nth-child(2) {
  margin-top: 0;
  place: relative;
}
.dropdown-el::after {
  content material: "";
  place: absolute;
  proper: 0.8em;
  high: 0.9em;
  border: 0.3em strong #3694d7;
  border-color: #3694d7 clear clear clear;
  transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
  border: 0.06em strong #3694d7;
  background: #fff;
  border-radius: 0.25em;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  max-height: 15em;
}
.dropdown-el.expanded label {
  border-top: 0.06em strong #d9d9d9;
}
.dropdown-el.expanded label:hover {
  shade: #3694d7;
}
.dropdown-el.expanded enter:checked + label {
  shade: #3694d7;
}
.dropdown-el.expanded::after {
  rework: rotate(-180deg);
  high: 0.55em;
}

JQuery

$('.dropdown-el').click on(perform(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
  $('#'+$(e.goal).attr('for')).prop('checked',true);
});
$(doc).click on(perform() {
  $('.dropdown-el').removeClass('expanded');
});

https://codepen.io/libsys/pen/bGKomaE

Please help.