Glue 3 divs together using css - html

Question

I have 3 diferent divs and I want to "glue" them together. When I say glue them, I mean that I want to make one shape out of it. Here is my css and html code (with bootstrap):
#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
float: left;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzDnoLevo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
}
#NadrzDnoLevo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
width: 150px;
border-radius: 300px 0 0 300px;
}
#NadrzDnoPravo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 150px;
height: 0;
}
#NadrzDnoPravo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
width: 150px;
border-radius: 0 300px 300px 0;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 500px;
height: 0;
}
#NadrzLuby {
position: relative;
overflow: hidden;
border: 5px solid black;
border-left-width: 0px;
border-right-width: 0px;
height: 300px;
width: 500px;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzDnoLevo" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzDnoPravo" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
</div>
It does work pretty well, until I try it on mobile. Here is how it looks normally.
My problem comes when I try it on mobile where it looks like this:
As you can see, on mobile it looks horrible. I just want to somehow glue NadrzDnoLevo, NadrzLuby and NadrzDnoPravo together. Is it possible? Thanks for any help.

Answer 1

You need to get rid of float: left, and you can use flexbox to make them stay side by side and not wrapping to the next line by adding these rules to the .wrapper:
.wrapper {
display: flex;
flex-wrap: nowrap;
}
Also, on top of that, you can add
flex: 0 0 150px;
to #NadrzDnoLevo and NadrzDnoPravo and add
flex: 0 1 500px;
to #NadrzLuby to make the capsule keep its shape.
#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
display: flex;
flex-wrap: nowrap;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzDnoLevo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
}
#NadrzDnoLevo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
flex: 0 0 150px;
border-radius: 300px 0 0 300px;
}
#NadrzDnoPravo:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 150px;
height: 0;
}
#NadrzDnoPravo {
position: relative;
overflow: hidden;
border: 5px solid black;
height: 300px;
flex: 0 0 150px;
border-radius: 0 300px 300px 0;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 500px;
height: 0;
}
#NadrzLuby {
position: relative;
overflow: hidden;
border: 5px solid black;
border-left-width: 0px;
border-right-width: 0px;
height: 300px;
flex: 0 1 500px;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzDnoLevo" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%"></div>
<div id="NadrzDnoPravo" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
</div>

Answer 2

one div solution to easy handle it:
.box {
--w: 50%; /* height of the blue coloration */
--h:200px; /* Height of the element */
height: var(--h);
max-width: 400px;
margin: 20px 0;
border-radius: var(--h);
border: 3px solid;
background:
linear-gradient(#000,#000) left calc(var(--h)/2) top 0/3px 100%,
linear-gradient(#000,#000) right calc(var(--h)/2) top 0/3px 100%,
linear-gradient(blue,blue) bottom/100% var(--w);
background-repeat:no-repeat;
transition:1s;
}
.box.hide {
-webkit-mask:
linear-gradient(#fff,#fff)
center/calc(100% - var(--h)) 200%
padding-box border-box no-repeat;
margin:20px calc(-1*var(--h)/2);
}
.box:hover {
--w:80%;
}
<div class="box"></div>
<div class="box hide"></div>

Answer 3

#keyframes fillin {
0% {
height: var(--beginHeight);
}
100% {
height: var(--endHeight);
}
}
.wrapper {
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
float: left;
}
.wrapper > div:before {
background-color: blue;
}
#NadrzFrontView:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 300px;
height: 0;
background-color: blue;
display: inline-block;
}
#NadrzFrontView {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#NadrzLuby:before {
--beginHeight: var(--startHeight);
--endHeight: var(--finishHeight);
animation: 3s fillin ease forwards;
content: '';
position: absolute;
bottom: 0;
width: 800px;
height: 0;
}
#NadrzLuby {
--var-height:300;
position: relative;
overflow: hidden;
border: 5px solid black;
border-radius: calc(var(--var-height) * 0.5px);
height: calc(var(--var-height) * 1px);
width: 800px;
}
.line-left {
position: absolute;
left: calc(var(--var-height) * 0.5px);
top: 0;
bottom: 0;
border: 2.5px solid black;
}
.line-right {
position: absolute;
right: calc(var(--var-height) * 0.5px);
top: 0;
bottom: 0;
border: 2.5px solid black;
}
<div class="row">
<div class="col-lg-3">
<div id="NadrzFrontView" style="--startHeight: 0%; --finishHeight: 50%"></div>
</div>
<div class="col-lg-9 wrapper">
<div id="NadrzLuby" style="--startHeight: 0%; --finishHeight: 50%">
<span class="line-left"></span>
<span class="line-right"></span>
</div>
</div>
</div>