我不知道如何将一个项目对齐到另一个元素的右侧，一个是表格，另一个是Flex框。我已经确保它们一起在一个div中，但我就是不能让它们彼此对齐。我试过使用网格，但不能让它正确工作。
我试图把我的主要轨道元素排到游戏模式和派系的右手边，就像一个侧栏。
我已经确保它们在一个div中，但我就是不能让它们彼此并排。我尝试过使用网格，但不能让它正确工作，网格只是将元素移出屏幕，我就是不能解决这个问题。
向右浮动只会将其移动到派系元素垂直对齐的最后一个元素的右侧，似乎没有任何作用？

body {
  background-color: #2f2f2f;
  color: white;
}

.box {
  border: solid;
}

.header-text {
  font-family: 'Philosopher';
  font-size: 35px;
}

.subheading-text {
  font-family: 'Roboto';
  font-size: 20px;
}

.sub-heading {
  text-align: center;
  font-family: 'Roboto';
  font-size: 25px;
  font-weight: bold;
}

.page-content :is(h4) .mw-headline {
  font-family: 'Philosopher';
  font-size: 35px;
  border-bottom: solid 5px;
  border-top: solid 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
}

.subtext {
  text-align: center;
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: bold;
}

.titles {
  font-family: 'Philosopher', sans-serif;
  font-size: 35px;
  height: 2px;
  text-align: center;
  line-height: 0.5;
  vertical-align: top right;
}

.main-rail {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: right;
  width: 20%;
}

.main-rail>div {
  text-align: center;
  border: solid;
}

<div class="box">
  <div>
    <div class="game-modes">
      <table style="display:flex; justify-content:center;">
        <tr>
          <td><img src="./images/Border.png" alt=""></td>
        </tr>
        <tr>
          <td class="titles">Game Modes</td>
        </tr>
        <tr>
          <td><img src="./images/Border.png" alt=""></td>
        </tr>
      </table>
      <p></p>
      <div style="display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;">
        <div style="flex-basis:96px"><img src="./images/Casual_Full_Size.webp" width="200px" height="179px" alt="">
          <div class="sub-heading">CASUAL<br /></div>
        </div>
        <div style="flex-basis:96px"><img src="./images/Game_Mod_Ranked_200px.webp" width="200px" height="179px" alt="">
          <div class="sub-heading">RANKED<br /></div>
        </div>
        <div style="flex-basis:96px"><img src="./images/Game_Mod_Custom_200px.webp" width="200px" height="179px" alt="">
          <div class="sub-heading">CUSTOM<br /></div>
        </div>
      </div>
    </div>
    <div>
      <div class="factions">
        <table style="display:flex; justify-content:center;">
          <tr>
            <td><img src="./images/Border.png" alt=""></td>
          </tr>
          <tr>
            <td class="titles">Factions</td>
          </tr>
          <tr>
            <td><img src="./images/Border.png" alt=""></td>
          </tr>
        </table>
        <p></p>

        <div style="display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;">

          <div style="flex-basis:96px"><img src="./images/Emblem_Vestige.webp" width="209px" height="209px" alt="">
            <div class="sub-heading">VESTIGE<br /></div>
          </div>

          <div style="flex-basis:96px"><img src="./images/Emblem_Drakkorith.webp" width="209px" height="209px" alt="">
            <div class="sub-heading">DRAKKORITH<br /></div>
          </div>

          <div style="flex-basis:96px"><img src="./images/Emblem_Ascended.webp" width="209px" height="209px" alt="">
            <div class="sub-heading">ASCENDED<br /></div>
          </div>

          <div style="flex-basis:96px"><img src="./images/Emblem_Oblivion.webp" width="209px" height="209px" alt="">
            <div class="sub-heading">OBLIVION<br /></div>
          </div>

          <div style="flex-basis:96px"><img src="./images/Emblem_Neutral.webp" width="209px" height="209px" alt="">
            <div class="sub-heading">NEUTRAL
              <div class="subtext"><br />(Not a playable Faction)</div>
            </div>
          </div>
        </div>
        <div>
          <div class="main-rail">
            <div><img src="./images/Site-background-dark.webp" alt=""></div>
            <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae quos sapiente accusantium ipsam rem corporis aliquam quam temporibus voluptatibus id non labore maiores unde, illo earum facere, deleniti magnam reprehenderit?</div>
            <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae quos sapiente accusantium ipsam rem corporis aliquam quam temporibus voluptatibus id non labore maiores unde, illo earum facere, deleniti magnam reprehenderit?</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>