How to stop div collapses when minimizing the screen using react bootstrap - css

Question

I am developing a page where I am having one logo and one slogan. I need to place the logo first below that I need to place one horizontal Line and after that I need to place the slogan and below that I need to place another horizontal line. After that I need to place one button which will open the modal. At the bottom of the screen I need to keep one paragraph tag. I have brought all the above things. But the issue is when I am checking with various devices all of the styles are getting collapsed, I have tried using separate divs Rows and Columns but all results the same. Could any one help me out to sort this issue please. Thanks in advance. I have wrote the code below .
Expected Output:(Got the same output but not responsive)
LOGO
-----------------------------
SLOGAN WILL COME HERE
-----------------------------
Button
Code Starts
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
position: "absolute",
width: "40vh",
// marginTop: "1px",
}}
/>
{/* First HR */}
<div style={{ marginTop: "13em" }}>
<hr
style={{
position: "relative",
color: "#002a54",
width: "53vh",
borderColor: "#002a54",
}}
/>
</div>
{/* First HR ends */}
{/* Content Start */}
<div style={{ marginTop: "-1em" }}>
<p style={{ fontSize: "125", color: "#002a54" }}>
INTERLOCK RELATONSHIPS TO UNLOCK VALUE
</p>
</div>
{/* Content End */}
{/* Second HR */}
<div style={{ marginTop: "-2em", position: "relative" }}>
<hr
style={{
color: "#002a54",
borderColor: "#002a54",
width: "53vh",
// marginTop: "-18px",
}}
/>
</div>
{/* Second HR ends */}
{/* Button starts */}
<div>
<Button
variant="outline-secondary"
onClick={handleShow}
style={{
background: "#D3D3D3",
color: "#002a54",
border: "2px solid #002a54",
borderRadius: "3px",
padding: "4px, 10px",
}}
>
<p
style={{
fontColor: "#002a54",
fontsize: "125",
marginBottom: "0rem",
}}
>
Contact US
</p>
</Button>
{/* Button Ends */}
</div>
<p
style={{
position: "relative",
top: "270px",
fontSize: "125",
color: "#002a54",
}}
>
UNDER CONSTRUCTION BUT OPEN FOR BUSINESS
</p>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
{status && renderAlert()}
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
CSS:
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}