Create Cookie Banner with React JS and custom CSS - css

Question

Hello I am new to React Js and Iam not great with CSS and struggling.
I am trying to implement a basic cookie banner design.
Here is the overall code of what I've tried so far
JS:
import React from "react";
import { withWidth } from "#material-ui/core";
import style from './Cookie.module.css';
function Cookies(props) {
return (
<React.Fragment>
<div ref={props.forwardedRef}>
<div className={style.cookies}>
<div className={style.content}>
<p className={style.header}>We use cookies on this site to enhance your user experience</p>
<p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.</p>
<div className={style.click}>
<button className={style.button}>
Yes I agree
</button>
</div>
</div>
</div>
</div>
</React.Fragment >
)
}
export default withWidth()(Cookies);
CSS:
.cookies {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.content {
padding-left: 100px;
padding-top: 5px;
}
.header {
color: #FFFFFF;
font-size: 20px;
}
.message {
color: #FFFFFF;
font-size: 16px;
}
.click {
left: 0;
}
.button {
background-color: #3f7edf;
color: #FFFFFF;
font-size: 13px;
height: 50px;
width: 100px;
border-radius: 5px;
border-color: #3f7edf;
}
I tried adding my custom CSS and implementing a basic UI for cookie banner.
Here is my current Cookie Banner:
CURRENT DESIGN
Here is the design I am trying to accomplish:
MY GAOL

Answer 1

You can wrap your header and message div in another div like this
<div className={style.cookies}>
<div className={style.content}>
<div className={style.main}>
<p className={style.header}>We use cookies on this site to enhance your user experience</p>
<p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.</p>
</div>
<div className={style.click}>
<button className={style.button}>Yes I agree</button>
</div>
</div>
</div>
and add this to css file :
.content {
padding-left: 100px;
padding-top: 5px;
display: flex;
justify-content:center;
align-items:flex-end
}
.main{
width: 55%
}
.click {
width:45%;
margin-right: 5px
left: 0;
}

Answer 2

Try to chagne your content css class to this
.content {
max-width: 1200px;
display: flex;
justify-content: center;
align-items: flex-end;
}