In order for the div with 's' class to move to the next line, it should be displayed as a block element.
Check out the code on jsfiddle here.
<body>
<div class="header">
<div class="header-first">
<div>FLYWHEEL <span>▼</span></div>
</div>
<div class="header-second">
<div class="one">PRODUCT <span>▼</span></div>
<div class="s">S</div>
</div>
</div>
</body>
body{
background:linear-gradient(to bottom right,#3f557c,#8af3c7be,#e7800abe);
height:100vh;
padding:0px;
}
.header{
position: relative;
height:20%;
width:100%;
margin:0px;
}
.header-first,.header-second{
position:relative;
float:left;
display:flex;
padding:0;
margin:0;
align-items: center;
justify-content: center;
background-color:rgb(129, 137, 173);
border-radius:30px;
box-sizing:border-box;
height:100%;
width:11.11%;
font-family: Comic Sans MS, Comic Sans;
color:rgba(255, 166, 0, 0.904);
font-size:16px;
}
.s{
border:3px solid red;
}
It seems that the issue with the 's' class not moving to the next line could be related to the parent element's display property being set as a block element. Could this have something to do with display:flex or float:left?
Appreciate any insight!