Replace two div on a row without changing width of parent element - html

Question

I am really struggling to move two div in a row.
I tried to display flex in row but when I do that the current width of my two div remain the same while I'd like not to change the final width of the parent element.
I also tried inline display but it does not work too...
I want to place the two div inside the div with class "statusDetails" on the same row without interfering the current width of the div with class "status".
the objective is to have something like the end of this screen:
Any help will be appreciated!
Thx,
EDIT: the fiddle example :
body {
background-color: #edebe9;
}
.ddl-container .ddl-list {
position: absolute;
display: flex;
flex-direction: column;
border-left: 3px solid #3286d5;
background-color: white;
z-index: 1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container>div {
cursor: pointer;
border: solid 3px transparent;
font-size: 1.1rem;
}
.horizontal-icon-menu .ddl-container>div:hover {
color: black;
}
/* .ddl-container:hover */
.horizontal-icon-menu .ddl-container .ddl-list {
right: 0;
border-left: 0px;
background-color: white;
z-index: 1;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container:hover>div {
background-color: white;
}
.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
background-color: #629924;
color: white;
}
.solid-border-bottom {
border-bottom: solid 1px #5e5e5e;
padding: 0px !important;
}
.statusDetails {
box-sizing: content-box;
}
.status div {
padding: 0px !important;
}
.statusDetails div>span {
text-transform: uppercase;
}
.statusDetails div span:last-of-type {
text-transform: lowercase;
}
<main>
<div class="horizontal-icon-menu">
<div class="ddl-container">
<div class="icon-param"><span class="username">ystalio</span></div>
<div class="ddl-list">
<div class="solid-border-bottom">
<div class="changeColorOnHover">Profil</div>
<div class="changeColorOnHover">Boîte de réception</div>
<div class="changeColorOnHover">Préférences</div>
<div class="changeColorOnHover">Déconnexion</div>
</div>
<div class="status">
<div class="statusDetails">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal">
test
</div>
</div>
</div>
</div>
</div>
</main>

Answer 1

Since you dont have a working example, I assume you only want to have two div side by side aligned.
I will suggest you using "Bootstrap Grid System" in this case;
Otherwise, for vanilla html and css:
try adding CSS:
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.col-sm-5 {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
And HTML class tag for:
<div class="status row">
<div class="statusDetails col-sm-5">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal col-sm-5">test</div>
</div>
See Snippet below:
body {
background-color: #edebe9;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.col-sm-5 {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.ddl-container .ddl-list{
width: 300px;
position: absolute;
display: flex;
flex-direction: column;
border-left: 3px solid #3286d5;
background-color: white;
z-index: 1;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container > div {
cursor: pointer;
border: solid 3px transparent;
font-size: 1.1rem;
}
.horizontal-icon-menu .ddl-container > div:hover {
color:black;
}
/* .ddl-container:hover */
.horizontal-icon-menu .ddl-container .ddl-list {
right: 0;
border-left: 0px;
background-color: white;
z-index: 1;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
text-transform: capitalize;
}
.horizontal-icon-menu .ddl-container:hover > div {
background-color: white;
}
.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
background-color: #629924;
color: white;
}
.solid-border-bottom {
border-bottom: solid 1px #5e5e5e;
padding: 0px !important;
}
.statusDetails {
box-sizing: content-box;
}
.status div {
padding: 0px !important;
}
.statusDetails div > span {
text-transform: uppercase;
}
.statusDetails div span:last-of-type {
text-transform: lowercase;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<main>
<div class="horizontal-icon-menu">
<div class="ddl-container">
<div class="icon-param"><span class="username">ystalio</span></div>
<div class="ddl-list">
<div class="solid-border-bottom">
<div class="changeColorOnHover">Profil</div>
<div class="changeColorOnHover">Boîte de réception</div>
<div class="changeColorOnHover">Préférences</div>
<div class="changeColorOnHover">Déconnexion</div>
</div>
<div class="status row">
<div class="statusDetails col-sm-5">
<div><span>ping </span><span id="ping">10</span><span> ms</span></div>
<div><span>server </span><span id="server">0.1</span><span> ms</span></div>
</div>
<div class="signal col-sm-5">
test
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>