ReactJS Разделение экрана на две половины

Question

Как я могу разделить экран на две половины, такие как: , чтобы в каждую половину добавить мои пользовательские элементы?

Пример: синяя сторона - это картинка вторая половина содержит несколько случайных текстовых вводов

Я пытался так:

<div className={styles.splitScreen}>
        <div className={styles.topPane}>
          {topPane}
        </div>
        <div className={styles.bottomPane}>
          {bottomPane}
        </div>
      </div>

с файлом css, содержащим:

.splitScreen {
  position: relative;
  height: 100vh;

  .topPane,
  .bottomPane {
    position: relative;
    width: 100%;
    height: 50%;
  }

  .topPane {
    transform: rotate(180deg);
  }
}

, но безуспешно.

Answer 1

Это звучит как хороший пример использования CSS flexbox. CSS FLEXBOX

<div className={styles.splitScreen}>
  <div className={styles.topPane}>{topPane}</div>
  <div className={styles.bottomPane}>{bottomPane}</div>
</div>

объект стилей:

splitScreen: {
    display: 'flex';
    flexDirection: 'row';
},
topPane: {
    width: '50%',
},
bottomPane: {
    width: '50%',
},

РЕДАКТИРОВАТЬ: если они должны быть рядом, используйте flexDirection: 'row',.

Answer 2

Звучит так, как вы хотите flexbox или css -grid.

Поскольку уже есть ответ на flexbox от iepur1lla, вот альтернатива css -grid;

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

И если вы хотите быть уверены, что topPane и bottomPane всегда находятся в этих двух позициях, вы можете добавить это к CSS:

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }