'Align items 2/3rd through div?

I have the following code in react:

.alignHorizontally {
  display: flex;
}

.firstTitle {
  align-items: center;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}

.secondTitle {
  margin-left: 80px;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}


/* added by editor for demonstration purpose */
.alignHorizontally > * {
  box-sizing: border-box;
}

.firstTitle { 
  border: 2px dashed red;
}

.secondTitle { 
  border: 2px dashed blue;
}
<div class="alignHorizontally">
  <div class="firstTitle">Title
  </div>
  <div class="secondTitle">
    Second title
  </div>
</div>

I want the first div(firstTitle) to be on the far left hand side and the second div (secondTitle) to be about 2/3rds of the way through the screen. I know I can force this by adding padding-left: 100px but it feels ugly. Is there a nice way of doing this?

htmlcss


Solution 1:[1]

You can also use justify-content: space-between in your alignHorizontally class or try any of the other justify-content parameters that most closely match the layout you want.

.alignHorizontally {
    display: flex;
    justify-content: space-between;
  }
  
  .firstTitle {
    align-items: center;
    display: flex;
    margin-top: 16px;
    word-spacing: 2px;
    line-height: 1;
  }
  
  .secondTitle {
    margin-left: 80px;
    display: flex;
    margin-top: 16px;
    word-spacing: 2px;
    line-height: 1;
  }
  
  
  /* added by editor for demonstration purpose */
  .alignHorizontally > * {
    box-sizing: border-box;
  }
  
  .firstTitle { 
    border: 2px dashed red;
  }
  
  .secondTitle { 
    border: 2px dashed blue;
  }
<div class="alignHorizontally">
        <div class="firstTitle">Title
        </div>
        <div class="secondTitle">
            Second title
        </div>
    </div>

It's not in English but it was the best tutorial I've seen so far about aligning items with CSS grid.

Alura's example justify-content CSS grid

https://www.alura.com.br/artigos/css-guia-do-flexbox

Solution 2:[2]

  1. Add .secondTitle { width: 33%; } to occupy 1/3 of the space which means it will occupy 1/3 of the space.
  2. with margin-left: auto you can push it then to the right to occupy that 1/3 at the right space.

Alternativly you could give the first div a width of 66% directly.

/* original CSS */
.alignHorizontally {
  display: flex;
}

.firstTitle {
  align-items: center;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}

.secondTitle {
  margin-left: 80px;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}


/* CSS Chanegs !!! */
.secondTitle {
  width: 33%;
  margin-left: auto;
}


/* added by editor for demonstration purpose */
.alignHorizontally > * {
  box-sizing: border-box;
}

.firstTitle { 
  border: 2px dashed red;
}

.secondTitle { 
  border: 2px dashed blue;
}
<div class="alignHorizontally">
  <div class="firstTitle">Title
  </div>
  <div class="secondTitle">
    Second title
  </div>
</div>

Solution 3:[3]

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; // setting three columns in our grid layout

}

.grid-item2 {
  grid-column-start: 3; // setting second div to start and end in 3d column
  grid-column-end: 3;
}
<div class="grid-container">
 <div class="grid-item1">Title #1</div>
 <div class="grid-item2">Title #2</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cassioliveira
Solution 2 tacoshy
Solution 3 casper

Related Questions