0

I'm relatively new to css and need some help aligning items. Basically I want alignment to look something like this.

Item 1                                                                                            item 2    item 3

The issue is that all the items are stuck on the left side and I can't seem to reposition them. My CSS and HTML code looks like this:

.container {
  display: flex;
  align-items: baseline;
  margin-left: 70px;
  margin-right: 40%;
  background-color: red;
}

.itemOne {
  text-align: right;
}

.itemTwo {
  display: inline;
  font-size: 20px;
  font: url('../../public/fonts/Lato-Bold.ttf');
  letter-spacing: 0.24px;
  text-align: left;
}

.itemThree {
  text-align: right;
}
<div className={styles.container}>
  <div className={styles.itemOne}>itemOne</div>
  <div className={styles.itemTwo}>itemTwo</div>
  <div className={styles.itemThree}>itemThree</div>
</div>

The container is a display flex and I'm just setting the size of the container. Item 1, and 3 however are not adjusted properly to the end of the container when I do text-align: right. I can edit the margin and move items 1 and 3 but it's hard to eyeball the positioning. Any help will be thankful.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
EliteCoder123
  • 25
  • 1
  • 5
  • can you please add a drawing to the intended layout? Its more clear then a vague 3 word despcription. – tacoshy Mar 17 '21 at 17:04

1 Answers1

0

Try to add this line to .itemTwo:

flex: 1;
blaumeise20
  • 2,148
  • 8
  • 26