align text baseline over hr-CodePudding

I'm trying to align the text just above the hr tag like the logout button using bootstrap. Here's what I want to achieve:

bootstrap code :

        <div className="position-relative">
            <hr/>
            <div className="position-absolute end-0 bottom-0 d-flex">
              <p className="align-baseline //not working">Logged in as {user?.email}</p>
              <button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
            </div>
        </div>

Glad for any help

#Edit : after adding mb-0 to my p tag :

CodePudding user response：

Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.

Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.

I also added a small padding to stop it from sticking to the bottom.

JSFiddle

Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle

CodePudding user response：

Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).

<div class="d-flex align-items-center">...</div>

You can find more resource here link.

CodePudding user response：

You probably do not need absolute position , flex & order can do .

example

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="d-flex flex-column"><!-- make it a flex column to use order -->
      <hr class="order-2 m-0" /><!-- resets margin & order -->
      <div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
        <p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
        <button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
      </div>
    </div>
  </div>
</div>