Centering an absolute element until ranges without js - html

Question

I have a dropdown which has title and content. Content should be centered is relatively to title, if only there is empty place for it. If there is no empty place, content should cuddle to the parent's border.
I've prepared a DEMO. This demo has a follow significant code:
.dropdown {
position: relative;
left: 100px;
}
.dropdown_content {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 200px;
margin-top: 15px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
}
<div class="container">
<div class="dropdown">
<div class="dropdown_button"></div>
<div class="dropdown_content"></div>
</div>
</div>
Now .dropdown_content floats beyond the borders when second input[type="range"] has a small value. This behaviour is bad. I want in this case .dropdown_content to cuddle to the left border.
Desired result

Answer 1

I removed the absolute positioning see: https://jsfiddle.net/v9amen50/.
That seems to work.
body {
margin: 20px;
}
.block {
margin-bottom: 10px;
}
.container {
display: flex;
padding: 20px 0;
}
.dropdown {
position: relative;
}
.dropdown_button {
cursor: pointer;
text-align: center;
}
.dropdown_content {
display: block;
margin: 15px auto;
width: 150px;
height: 200px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
}
.dropdown_content::before {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 24px;
content: "";
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
}
<div class="block">
<input type="range" name="title" min="1" max="100" , value="5">
</div>
<div class="block">
<input type="range" name="position" min="0" max="500" , value="0">
</div>
<div class="container">
<div class="dropdown">
<div class="dropdown_button"></div>
<div class="dropdown_content"></div>
</div>
</div>