I made a Component which is a card containing information, I made two of those and want them horizontally and spaced around.
I tried making a larger container in the scss for the Container, and that did not work. I used the App.css file and it worked but I want another way of doing it.
Here is the jsx and scss of the Component.jsx respectively
import "./Component.css"
const Component = (props) => {
return (
<>
<div className="major-container">
<div className="container">
<div className="first-container">
<div className="is-employed">
<p>{props.isEmployed? <h2>true</h2>: <h2>false</h2>}</p>
</div>
<div className="salary">
<p>{props.salary}</p>
</div>
</div>
<div className="second-container">
<div className="profile-picture-container">
<img src={props.image} alt="" />
</div>
<div className="name-container">
<p>{props.name}</p>
</div>
<div className="job-desc-container">
<p>{props.jobDesc}</p>
</div>
</div>
<div className="full-desc-container">
<p>{props.name} {props.fullDesc}</p>
</div>
</div>
</div>
</>
)
}
export default Component
.major-container {
.container {
border: 1px solid rgb(112, 52, 52);
width: 400px;
padding: 2rem;
margin: 1rem;
.first-container {
.is-employed {
p {
}
}
.salary {
p {
}
}
}
.second-container {
.profile-picture-container {
img {
width: 200px;
height: 200px;
}
}
.name-container {
//border: 2px solid red;
p {
}
}
.job-desc-container {
p {
}
}
}
.full-desc-container {
p {
}
}
}
}