Align Horizontal Rule in Css, Not aligning properly - css

Question

How can I do something like this?
The Orange Line should be on the same Line as the Instruction Text, I have this as my CSS Code
.InstructionText{
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
text-align: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
.hr-rule{
position: absolute;
border: 7px solid #FF9900;
width: 400px;
}
But rather than have the above image, I have this Instead.
And using it inside the code I have this
import React from 'react';
import './app-styles.css';
import Vector from './Vector.png'
import ie_logo from './ie_logo.png';
import {Link} from 'react-router-dom';
function HomePage() {
return (
<div className="App">
<header className="header">
<img src={Vector} style={{margin:7, flexDirection:'column', alignItems: 'center'}} alt="Vector" />
<img src={ie_logo} style={{margin:7, flexDirection: 'row', width:114, height:25}} alt="ie_logo" />
<p className="needhelpText">REGISTERED? LOGIN</p>
</header>
<form>
<div className="InstructionText">
payment
</div>
<div className="hr-rule">
</div>
</form>
<footer className="footer">
Privacy Policy |
Do Not Sell My Personal Information |
Advertising Guidelines |
Site Map
<div className="copyrightText">
© Copyright 2021 | Lucas Tech | All Rights Reserved
</div>
<div className="footerLogo">
<img src={ie_logo} alt="ie_logo" />
</div>
</footer>
</div>
);
}
export default HomePage;

Answer 1

This seems like a very complicated method. Why not use a pseudo-element?
.InstructionText {
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
justify-content: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
display: flex;
}
.InstructionText:after {
content: "";
border-bottom: 7px solid #FF9900;
margin-bottom: 7px;
width: 200px; /* or whatever width you require */
}
<div class="InstructionText">
payment
</div>

Answer 2

The main reason being that div is a block element by default, thus it will stack on top of each others. We can achieve your goal by using flex, which put the 2 divs side-by-side:
HTML:
<form>
<div class="header-container">
<div class="InstructionText">
payment
</div>
<div class="hr-rule"></div>
</div>
</form>
CSS:
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.InstructionText{
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
text-align: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
.hr-rule{
margin-left: 20px;
height: 14px;
background-color: #FF9900;
width: 400px;
}
For the thick line, instead of using border, it's more efficient and understandable to just make a div with the width and 14px height, which achieve the same thing.