Here is what I'm intending to do: Table

Current HTML CSS, for some reason the table can't contain multiple objects in a row.:

.boardTitle{
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  color: red;
}
.boardTable{
  flex: 1;
  flex-direction: column;
}
.boardRow{
  flex-direction: row;
}
.thread{
  border: solid;
}

<div>
  <div class="boardTitle">
    Name
  </div>
  <div class="boardTable">
    <div class="boardRow">
      <div class="thread">
        1
      </div>
      <div class="thread">
        2
      </div>
    </div> 
    </div>
  </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.boardRow class is contain the threads so you should give it display: flex if you want them to be next each other.

.boardRow{
      display:flex;
      flex-direction: row;
    }