place 2 components in the same row

In this component, I have an image at the top and then 2 other components (inside <ItemsContainer/>) at the bottom that appear as different rows. I want to put the other two items (a grid and a chart) in a single row and I have already tried using flex direction but it does not seem to work for me. It could be happening because I am using flex-direction: column; in the parent component already.

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    Heading Text
    </div>
    <span> The he text goes here. </span>
  <div className="regressionSetup">
    <ItemsContainer/>
    </div>
      </main>
.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}

.heading{
    font-size: 25px;

}

.regressionSetup{
    flex-direction: row;
}

enter image description here

ItemsContainer:

        return(
            <div className="container">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
</div>)

css

.container {
    background-color: red;
    width: 100vw;
    flex-direction: row;
  }

How can I fix this such that the grid appears on the left and the chart appears on the right but in the same line/row?

Answer

It looks like you are using Bootstrap. So column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want 2 equal-width columns across, you can use .col-6.

The code would look like this of ItemContainer:

<div className="container-fluid pt-4">
    <div className="row justify-content-center">
        <div className="col-6">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
        </div>
        <div className="col-6">
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
        </div>
    </div>
</div>

UPDATE:

If you are using simple CSS, then let’s try to use display: flex:

.container {
  background-color: red;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.container .item {
  width: 50%;
}
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

So you code would look like this:

 <div class="container">
    <div class="item" >
      <PointDraweraddCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)} />
    </div>
    <div class="item">
      <RegressionSetup order_graph_1={this.state.order_graph_1} order_graph_2={this.state.order_graph_2}
        setOrders={(orders: any)=> this.setState(orders)}
        />
    </div>
  </div>