-1

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>
Roy
  • 7,811
  • 4
  • 24
  • 47
John Ken
  • 898
  • 1
  • 13
  • 26

6 Answers6

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
0

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>
Friday Ameh
  • 1,664
  • 1
  • 10
  • 15
0

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>
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
0

<style>
    #main{display:grid;
        grid-template-columns:1fr 1fr;
        
      }
</style>


<div id="main">
    <div class="first">First</div>
    <div class="second">Second</div>
    </div>
Harshal
  • 199
  • 3
  • 8
0

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;

Yves Kipondo
  • 5,289
  • 1
  • 18
  • 31
-1

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

sudhir kumar
  • 11
  • 3