CSS и React -> Проблема позиционирования с компонентами

Question

В настоящее время я работаю над Планировщиком Todo, который содержит компонент Panel, который включает в себя все задачи.В моем основном приложении я вставил три из них для трех «списков Todo».Все трое находятся рядом друг с другом, и теперь возникает проблема.Когда я добавляю Todo в любой из этих трех списков, остальные два также понижаются (так сказать, нижняя часть выстраивается в линию).Дело в том, что я хочу точную противоположность, а именно то, что вершина каждого «списка тодо» выстроена в линию (чтобы она оставалась вверху).

Я попытался установить фиксированное положение, а затем вручную переместить все три, но затем возникла проблема с разрешением, потому что на одном мониторе он может быть центрирован, а на другом мониторе с меньшим или большим разрешением он не центрирован.,

Любое предложение здесь?: /

как это выглядит в браузере: -> https://imgur.com/a/aN8wzRN

Код App.js:

import React, { Component } from 'react';
import './App.css';
import Panel from "./Panel";
import PanelChildren from "./PanelChildren";

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      value: ""
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <h1>Todos</h1>
        <form onSubmit={function() {
          return alert("You've to choose one specific table")
        }}>
          <div className="Label">
            <label>
              <div> <i>Todo eingeben</i> </div>
              <input onChange={this.handleChange} />
            </label>
          </div>
        </form>
        <br/>
        <hr/>
        <Panel heading="IMPORTANT TODOS">
          <PanelChildren value={this.state.value} />
        </Panel>
        <Panel heading="NORMAL TODOS">
          <PanelChildren value={this.state.value} />
        </Panel>
        <Panel heading="NOT IMPORTANT TODOS">
          <PanelChildren value={this.state.value} />
        </Panel>
      </div>
    )
  }
}

export default App;

---

Код Panel.js

import React, { Component } from 'react';
import './Panel.css';

class Panel extends Component {

    render() {
        return (
            <div className={"Panel " + this.props.heading}>
                <div className={"Panel-Heading " + this.props.heading}> {this.props.heading} </div>
                <div className="Panel-Content"> {this.props.children} </div>
            </div>
        )
    }
}

export default Panel;

---

Код App.css

.App {
  text-align: center;
}

.TodoList {
  list-style-type: none;
}

.addButton {
  background-color: white;
  border: 1px solid rgb(194, 194, 194);
  height: 40px;
  width: auto;
}
.moveButton {
  float: right;
  background-color: white;
  border: 1px solid rgb(194, 194, 194);
}

.listItems {
  padding: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

.Label {
  padding: 20px;
  border: 1px solid black;
  width: 200px;
  display: inline-block;
}

---

Код Panel.css

.Panel {
    display: inline-block;
    border: 1px solid rgb(194, 194, 194);
    width: 455px;
    margin: 20px;
}
.Panel-Heading{
    padding: 20px;
    text-align: center;
    font-weight: bolder;
}

.Panel.IMPORTANT.TODOS {
    /*possible code*/
}

.Panel.NORMAL.TODOS {
    /* possible code */
}

.Panel.NOT.IMPORTANT.TODOS {
    /*possible code */
}

.Panel-Heading.IMPORTANT.TODOS {
    background-color: rgb(216, 122, 122);
}

.Panel-Heading.NORMAL.TODOS {
    background-color: rgb(122, 216, 138);
}

.Panel-Heading.NOT.IMPORTANT.TODOS {
    background-color: rgb(238, 231, 127);
}

.Panel-Content {
    padding: 20px;
    text-align: left;
}