Как сделать, чтобы два разных элемента делились на одной горизонтальной линии (flex)

Question

Я пытаюсь сделать табло в реакции. Табло состоит из столбца сгибания, который показывает различные категории, а затем 4 строки, которые показывают 4 дома, и под каждым домом есть оценки, соответствующие каждой категории. Я сделал все это с помощью flex.

То, что я не могу понять, это как выровнять категорию с оценкой. Ниже у меня есть код для css и html

* 1004. *

html

<div className="App">

      <div className = "title">
        <div className="cont">
        <h2 className = "text">Layatharang</h2>
        </div>
        <div className="cont">
        <h2 className ="text">Chakravyuh</h2>
        </div>
        <div className="cont">
        <h2 className = "text">Overall</h2>
        </div>
      </div>
        <div className = "team">
        <img className = "image" src={d}/>
        <div className = "flagd">
          <h2>Dhruva</h2>
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.dhruva1}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.dhruva2}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.dhruva1+team.dhruva2}</h3>
          ))}
        </div>
        </div>

        <div className = "team">
        <img className = "image" src={r}/>
        <div className = "flagr">
          <h2>Rakshasa</h2>
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.rakshasa1}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.rakshasa2}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.rakshasa1+team.rakshasa2}</h3>
          ))}
        </div>
        </div>
        <div className = "team">
        <img className = "image" src={s}/>
        <div className = "flags">
          <h2>Samhara</h2>
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.samhara1}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.samhara2}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.samhara1+team.samhara2}</h3>
          ))}
        </div>
        </div>
        <div className = "team">
        <img className = "image" src={t}/>
        <div className = "flagt">
          <h2>Thandava</h2>
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.thandava1}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.thandava2}</h3>
          ))}
          <br />
          <br />
          <br />
          <br />
          {this.state.data.map((team)=>(
            <h3 className = "score">{team.thandava1+team.thandava2}</h3>
          ))}
        </div>
        </div>

    </div>
```[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/TsS13.jpg