0

My question is simple, I have a <div> with two <p> tags inside of it, I want one centered vertically in the <div> and the other to be at the bottom, is there a simple and clean way to achieve this?

Here is the code: https://jsfiddle.net/xpm7fsoh/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
random1234
  • 777
  • 3
  • 17
  • 41

1 Answers1

0

.App {
  display: flex;
  text-align: center;
}

.Container {
  color: #fff;
  background-color: red;
  padding: 50px;  
  display: flex;
  height: 50vh;
}

.One {
  display: flex;
  align-items: center;
}

.Two {
  display: flex;
  align-items: flex-end;
}
<div class="App">
  <div class="Container">
    <p class="One">Hello</p>
    <p class="Two">World</p>
  </div>
</div>
Bimal Pariyar
  • 257
  • 2
  • 9
  • Hello, did you look at the result of your code? It does not look like it should, neither of the tags are in the center or at the bottom, also they are not horizontally aligned. – random1234 Nov 30 '19 at 08:07