Отображать элемент рядом с элементом с помощью Flex

Question

Мой элемент div с классом user-list отображается ниже .result, но его следует поместить рядом с ним.

Я пробовал с float: left, но он не работает.Как я могу сделать это с flex?

.chat {
  position: relative;
  left: 10vw;
  height: 95vh;
  background-color: burlywood;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.result {
  width: 80vw;
  height: 80vh;
  float: left;
  background: red;
}

.user-list {
    background-color: #F1F1F4;
    float: left;
    height: 100%;
    overflow: auto;
    width: 200px;
}

<div class="chat">

  <div class="result"></div>

  <div class="user-list">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, voluptatum ducimus ratione nemo dolor consequuntur maiores corrupti rerum architecto qui necessitatibus nulla, deserunt harum quaerat facere, eius et minus.
  </div>
</div>

Answer 1

Используйте flex-direction: row вместо flex-direction: column на элементе .chat.