Naomi Naomi - 1 year ago 90
HTML Question

Use inline block on 2 elements inside a component in react

I have a component with two elements passed to it. I want the two elements to be displayed side by side. I've tried to use display: inline-block in CSS but it won't actually put the two elements side by side. I want the elements to be the same size so each of them will take up 50% of the screen.

I am finding react a bit tricky to style with CSS. Any advice how to make this work?
This is my component.

class Dashboardbox extends React.Component {
<div className="dashboardbox">
<Coursebox />
<Newsbox />

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

and my CSS

.course {
background-color: lightgrey;
margin-left: 20px;
height: 80%;
border-radius: 10px;
font-family: arial;
padding: 5px 10px 10px 10px;
margin-top: 10px;

.dashboard {
display: inline-block;

leo leo
Answer Source

Here's what you wanted

The important part:

.box-field {
  width: 50%;
  display: inline-block;

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

class Newsbox extends React.Component {
  render() {
    return <div className='box-field'> News box </div>

You don't need to style dashboardbox.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download