How to align Text in React Link tag?-CodePudding

I need to align the text inside <Link>(react-router-dom) to right end of Label, like this,

I have tried bootstrap classes and custom CSS styles but none of'em worked for me,

<Form.Label style={{ fontWeight: 'bold' }}>
  <div className="w-100">Password
       <Link to="/forgot-password" className="w-100 text-right" style={{textAlign: "right"}}>Forgot Password?</Link>
 </div>
</Form.Label>

Thanks in advance.

CodePudding user response：

Try this:

<Form.Label style={{ fontWeight: 'bold' display: flex; justify-content: space-between}}>
  <div className="w-100">Password</div>
  <Link to="/forgot-password" className="w-100">Forgot Password?</Link>
</Form.Label>

CodePudding user response：

try putting password in <span> and then put your span and link in a div

and then use flexbox justify-content to space-between

CodePudding user response：

You should be able to achieve a similar outcome with CSS Float.

Add ‘float: left’ to the label and ‘float: right’ to the link, this should mean they are on the same line. You’ll probably need to adjust the widths of the two, as well as making sure the input doesn’t also float (believe you do ‘float: none’).

Further questions, just comment

(PS Apologies for bad text formatting of answer, on mobile)