Content Moves on Opening Select Dropdown - html

Question

I need help with the Select Dropdown. It moves the content (Hello World) when opened. I have used Radio Input to select the specfic option when performing a Search. If there is any other better solution for this type of functionality, please assist.
HTML
<span class="dropdown-el">
<input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
<input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
<input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
<input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>
<input type="radio" name="sortType" value="ProductBrand" id="sort-brand"><label for="sort-brand">Product Brand</label>
<input type="radio" name="sortType" value="ProductName" id="sort-name"><label for="sort-name">Product Name</label>
</span>
<h1> Hello World</h1>
CSS
body {
text-align: center;
background: #ebf4fb;
min-height: 95vh;
margin: 0;
padding: 0;
border-bottom: 5vh solid #3694d7;
font-family: "Myriad Pro", "Arial", sans;
font-size: 24px;
}
.dropdown-el {
margin-top: 20vh;
min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height: 2em;
overflow: hidden;
top: 0.5em;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #444;
outline: none;
border: 0.06em solid transparent;
border-radius: 1em;
background-color: #cde4f5;
transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
background: #def;
}
.dropdown-el input {
width: 1px;
height: 1px;
display: inline-block;
position: absolute;
opacity: 0.01;
}
.dropdown-el label {
border-top: 0.06em solid #d9d9d9;
display: block;
height: 2em;
line-height: 2em;
padding-left: 1em;
padding-right: 3em;
cursor: pointer;
position: relative;
transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
margin-top: 2em;
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
display: block;
border-top: none;
position: absolute;
top: 0;
width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
margin-top: 0;
position: relative;
}
.dropdown-el::after {
content: "";
position: absolute;
right: 0.8em;
top: 0.9em;
border: 0.3em solid #3694d7;
border-color: #3694d7 transparent transparent transparent;
transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
border: 0.06em solid #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 solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
color: #3694d7;
}
.dropdown-el.expanded::after {
transform: rotate(-180deg);
top: 0.55em;
}
JQuery
$('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});
https://codepen.io/libsys/pen/bGKomaE
Please assist.