Trying to float right element and aling with top element

Question

I'm trying to achieve the following:

But maintaining a specific div structure/hierarchy/order:

<div>
  <div>
    <h3>TITLE</h3>
    <p>LEGEND</p>
  </div>
  <div>
    <i>BUTTON</i>
  </div>
</div>

Tried with position relative float right and display inline, but to no success.

Here are the attempts: https://jsfiddle.net/xzmf8753/

float:left for the left one and float:right for the right one — Temani Afif, Jun 10 '21 at 09:26

score 0 · Answer 1 · answered Jun 10 '21 at 09:26

0

<div style="background-color: red; position: relative">
  <div style="position: relative; display: inline;">
    <h3>TITLE</h3>
    <p style="display: inline;">LEGEND</p>
  </div>
  <div style="position: absolute;top: 0;right: 0;">
    <i>BUTTON</i>
  </div>
</div>

answered Jun 10 '21 at 09:26

Mangesh

365
2
8

thanks, that does the trick! – RASMiranda Jun 10 '21 at 09:37
@TemaniAfif that solution does not seem to work for this case – RASMiranda Jun 10 '21 at 09:57
@RASMiranda it does if you apply the properties correctly – Temani Afif Jun 10 '21 at 11:12

Trying to float right element and aling with top element

1 Answers1