Creating drop down button horizontal - html

Question

I would like to create a simple two drop down buttons horizontal in bootstrap,
so far here is what I have done:
label{
font-size: 0.875rem;
color: #666666;
text-transform: uppercase;
line-height: 1;
margin-bottom: .5rem;
display: block;
display: flex;
position: absolute;
}
.dropdown-select{
width: 500px;
border-bottom-color: deepskyblue;
background-color: white;
border-top: 0px;
border-left: 0px;
border-right: 0px;
margin-right: 30px;
}
.dropdown-list{
margin-top: 50px;
}
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child)
{
border: none;
color: green;
background-color: white;
margin-left: -22px;
position: absolute;
left: 532px
}
<div class="container>
<div class="row">
<div class="btn-group dropdown-list">
<label class="label-status">Test1</label>
<button class="dropdown-select" type="button"
aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
<input type="hidden" > demo
</button>
<button [disabled]="disabled" type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
</div>
<label class="label-serv">Test1</label>
<button class="dropdown-select" type="button"
aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
<input type="hidden" > demo
</button>
<button [disabled]="disabled" type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
</div>
</div>
</div>
the code above gives me something like this:
wrong view
I tried different way I could not figure it out,
The actual result should look like this one below or similar:
actual view
any similar example , tutorials or help will be appreciated .
Thanks

Answer 1

Here is my example, maybe you can use some parts of that.
I prepared design as in your "actual view"
.content{
margin: 0;
width: 100%;
}
span{
font-size: 14px;
color: #ccc;
}
.dropbtn {
color: #333;
padding: 5px 5px 5px 0px;
font-size: 16px;
cursor: pointer;
}
.dropbtn span{
color: #62c2ea;
float: right;
transform: rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
border-bottom: 2px solid #62c2ea;
width: 40%;
margin-right: 30px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
margin-top: 2px;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="content">
<div class="dropdown">
<span>Specjalista</span>
<div class="dropbtn">Dropdown 1 <span>❮</span></div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<span>Status</span>
<div class="dropbtn">Dropdown 2 <span>❮</span></div>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>