0

So I'm using a flexbox in my webpage , and I have two elements in it. I want the first element to be aligned center and the second on to be aligned towards the right. I am able to align them to the center with flexbox properties, but I'm not able to align the second one to the left. Float: right doesn't work apparently. Here's my code: Html:

<div>
<p> Hello </p>
<span> Hey! </span>
</div>

Css:

div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

span{
float: right;
}

Here's a fiddle attempt.

Saksham Chaturvedi
  • 11
  • 1
  • 2

1 Answers1

0

since you are using flex,it is seeing you justify-content: center;

So you need to write something which overwrites it and which is:

span{
justify-content: flex-end;
}

to align the right