place 2 components in the same row Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of place 2 components in the same row without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>
We are here to answer your question about place 2 components in the same row - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji