Naomi Naomi - 2 months ago 15
React JSX Question

Line two divs side by side with CSS and React

As the image shows I have two components that I want to be side by side and lined up. Dashboard

I am using React and the component with Negotiation, frontend and food has elements passed from another component.
How do I style this so each element (Negotiation, Frontend and food) are seperated from each other but still in the same column and news lined up next to it?

My JS

class Course extends React.Component {
render() {
return (
<div >

<div className="coursecontent">
<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
</div>
<button className="coursecontent">Start exercise</button>


</div>
);
}
}

class Welcomebox extends React.Component {

render() {
return <h1>Welcome Naomi</h1>;
}
}

ReactDOM.render( < Welcomebox />, document.getElementById('welcomebox'));

class Coursebox extends React.Component {
render() {
return (
<div className="box-field">


<Course coursename="Negotiation" progress= "20%" status="Progress"/>
<Course coursename="Frontend" progress="56%" status="Progress"/>
<Course coursename="Food" status="Progress" progress="43%"/>

</div>

);
}
}


class Newsbox extends React.Component {
render(){
return (
<div className="box-field" className="newsbox">
<h3>News</h3>
</div>
);
}
}


class Dashboardbox extends React.Component {
render(){
return(
<div className="dashboardbox">





</div>
);
}
}

ReactDOM.render( < Dashboardbox />, document.getElementById('dashboardbox'));


My CSS

.box-field,
.newsbox {
width: 45%;
background-color: lightgrey;
font-family: arial;
margin-left: 30px;
height: 80%;
padding: 5px 10px 10px 10px;
border-radius: 10px;
display: inline-block;

}


So basically, in between each Course element I would want space (preferably set with Margin) and I want the news component to line up with the Coursebox component.

Answer

Solution to bring new Newsbox component next to Coursebox

import Coursebox from './Coursebox'; import Newsbox from './Newsbox' class ContainerRow extends React.Component { render(){ return ( <div className='rowC'> <Coursebox /> <Newsbox /> </div> ); } }

Css .rowC{display:flex; flex-direction:row;}

Comments