Align divs in same line without using float and width [duplicate] - html

Question

This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 1 year ago.
I tried to align 2 divs on the same line without using float and width. I am using below code.
.first{
color: #377fd9;
font-size: 1.375rem;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.second{
cursor: pointer;
text-align: end;
padding: 8px 0;
}
<div class="first">First</div>
<div class="second">Second</div>

Answer 1

Looking at the required layout, the borders and padding refer to the whole thing, not just the First div.
If you put both divs in a container and put that styling on the container, you could use flex to align the divs within container.
.container {
display: flex;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.first {
color: #377fd9;
font-size: 1.375rem;
}
.second {
cursor: pointer;
text-align: end;
padding: 8px 0;
}
.first,
.second {
flex: 1;
}
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
</div>

Answer 2

Div is a block element by default and cannot be place side by side with other elements but you can change that by adding display:inline-block to your CSS like so
.first{
color: #377fd9;
font-size: 1.375rem;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
display:inline-block;
}
.second{
cursor: pointer;
text-align: end;
padding: 8px 0;
display:inline-block;
}
<div class="first">First</div>
<div class="second">Second</div>

Answer 3

Just wrap it inside a parent element, and use flexbox.
You can use your other styles with this if you want. If you don't need the space between the div's, you can remove the flex: 1 assigned to the div.
.first{
color: #377fd9;
}
.second{
cursor: pointer;
}
section {
display: flex;
}
div {
flex: 1;
}
<section>
<div class="first">First</div>
<div class="second">Second</div>
</section>

Answer 4

<style>
#main{display:grid;
grid-template-columns:1fr 1fr;
}
</style>
<div id="main">
<div class="first">First</div>
<div class="second">Second</div>
</div>

Answer 5

You can rely on flex box to perform that, For that you have to have a container which has display CSS property set to flex and all sub element will be align on the same line as the default Flex Direction is ROW
.container {
display: flex;
}
.container div {
flex-grow: 1;
}
.first {
background: #34D399;
}
.second {
background: #1E3A8A;
}
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div>
As you can see on the .container div selector I set all item to have equal width using flex-grow: 1;

Answer 6

You can use flex in your layout. Working eg. i hope this will work for you.
https://codesandbox.io/s/quizzical-banzai-dz5sm?file=/index.html