как поставить выпадающие списки в ряд?

Question

я решил сделать 3 списка, в которых будет определённое описание, но при попытках поставить их в один ряд(лево-право), ничего не получается

<div class="info">
  <details> текст </details>
  <details> текст </details>
  <details> текст </details>
</div>

что надо сделать, чтобы все получилось?

Answer 1

но при попытках поставить их в один ряд(лево-право), ничего не получается

Можно предложить такой вариант...

.info {
  display: flex;
  gap: 10px;
}
.info details {
  text-align: center;
}

<div class="info">
  <details> текст </details>
  <details> текст </details>
  <details> текст </details>
</div>

Или вот так...

.info {
  display: grid;
  justify-content: start;
  grid-auto-flow: column;
  gap: 10px;
}
.info details {
  text-align: center;
}

<div class="info">
  <details> текст </details>
  <details> текст </details>
  <details> текст </details>
</div>