display inline problem

[NorseMan]

I've lost my way, and now I can't find the right solution again. I've managed to do this before, but now I can't find the right combination.
I have 1 DIV that contains two other DIVs. One is on the left side, and one is on the right side. The right side is the google translate drop down menu. The right one is a div that contains the logo and company name. The problem is that the DIV for the google translate dropdown menu stays at the top, while the DIV for the logo is placed on the line below.

Which "display: inline" option should I go for each individual DIV when i want them aligned left and right on the same line?

 

[Michalio]

use flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent-div{
	display: flex;
}
.parent-div .child-div{
	flex-grow: 1;
}

 

[ahmedarain34]

To align two DIVs on the same line, one on the left side and one on the right side, you can use CSS flexbox or CSS floats. Here's an example using flexbox:
<div class="container">
<div class="left-div">
<!-- Content for the left div -->
</div>
<div class="right-div">
<!-- Content for the right div -->
</div>
</div>

CSS using flexbox:

.container {
display: flex;
justify-content: space-between;
}

.left-div {
/* Styles for the left div */
}

.right-div {
/* Styles for the right div */
}

With this CSS, the container class is set to display: flex, which creates a flex container. The justify-content: space-between property ensures that the left and right divs are aligned to the left and right edges of the container, respectively, with space distributed between them.

You can add your desired styles to the .left-div and .right-div classes to position and style the content within each div.