Как сделать CSS 2 строки и 8 столбцов

• Как сделать таблицу из 2 строк и 8 столбцов в CSS? Примечание: стол должен иметь строгое и строгое положение,

  Я делаю таблицу из 2 строк и 8 столбцов и Я добавил текстовый модуль в каждый столбец, а затем добавил HTML-код в каждый текстовый модуль, чтобы контролировать поведение текста модуль и преобразовать текстовый модуль в редактируемый столбец HTML с помощью любой плагин для перетаскивания веб-сайтов. Так что я добиваюсь успеха в этом и теперь проблема в том, что все столбцы отображаются в строках, я имею в виду сейчас У меня 8 строк, и в каждой строке у меня 1 столбец. Это случилось, когда я добавил HTML-код в каждый текстовый модуль. Это короткий HTML который я добавил в каждый текстовый модуль, чтобы преобразовать текстовый модуль в редактируемый столбец.

HTML > The same code is added to all Text Modules... Total Text modules are 8

Текстовый модуль 1

   <div id = "main-section2"></div>
    <div class = "bg-wrapper-cover">
      <div class = "row2">
        <div class = "col-text-0"></div>
        <div class = "bg-wrapper-cover-background"></div>
</div>

Текстовый модуль 2

   <div id = "main-section2"></div>
    <div class = "bg-wrapper-cover">
      <div class = "row2">
        <div class = "col-text-0"></div>
        <div class = "bg-wrapper-cover-background"></div>
</div>

CSS:

#main-section2
.bg-wrapper-cover {
  width:500px;
  position:relative;
}
.row2 {
  display: flex;
  width:100%;
  margin:0px;
}



.col-text-0 {
  padding:0 14px;
  border:1px solid black;
  display:inline-block;
  width:calc(25% - 30px);
  height:50px;
  background:pink;
  z-index:10;
}

.bg-wrapper-cover-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index :0;
  transition: background 3s;
}

.bg-wrapper-cover:hover .col-text-0 {
  background:none;
}
.bg-wrapper-cover:hover .col-text-0:hover {
  background:red;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
  background:blue;
  z-index:0;
}

.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
  background:darkgray;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
  background:yellow;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
  background:orange;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
  background:gray;
  z-index:0;
}

.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
  background:black;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
  background:green;
  z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
  background:lightblue;
  z-index:0;
}

СНИМОК