0

Im trying to align a text in the start of a flex div and an image in the flex-end of that parent div, but anything of what i tried make the job done. Any suggestions?

<div class="div-title title-mon">
    <p class="tmp-day">Lunedi</p>
    <img width="20px" height="30px" class='arrow arrow-mon' src="arrow.png">
</div>

Css code

.div-title {
    display: flex;
    align-items: center;
    flex-direction: row;
}

What should i do? Obviously this is not the entire code but only the code inherent to this piece of code...

Simon
  • 3
  • 2

2 Answers2

0

try in div-title

justify-content: space-between;


.div-title {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
<div class="div-title title-mon">
  <p class="tmp-day">Lunedi</p>
  <img width="20px" height="30px" class='arrow arrow-mon' src="arrow.png">
</div>
Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
Lior Tabachnik
  • 113
  • 7
0

In addition to the answer provided by Lior Tabachnik, you may also add the following css rule:

.div-title p {flex:1}

This will expand the p tag to take up all the remaining space to push the img to the right which is more likely what you want to achieve:

https://codepen.io/edward-web/pen/poVGKbL

Edward Chung
  • 11
  • 4