how can i convert vertical div of react to horizontal div

Question

i want to covert this vertical bordered Div into horizontal div for my project. i've try all possible solutions but they didn't get my expected output so can you tell me where is the problem in my css or js file that occurs this.

desboard.js

import React from "react";
import './index.css';
import Vote from './Election-Icon-us9w3f.png';
import Result from './electronic_vote_online_election_electionchamp-300x300.png';
import Candidate from './1677482073445.png';
import {
  Container,
} from "react-bootstrap";

function Dashboard() {
  const divStyle = {
    display: 'inline-block'};
  return (
    <>
      <Container>
      <div class="links" style={divStyle}>
    <table>
    <ul class="links__list">
      <tr class="links__item">
        <a class="links__link" href="#" id="candilist">
            <img src={Candidate} alt="" class="links__icon"/>
            <span class="links__text">CANDIDATE LIST</span>
        </a>
      </tr>
      <tr class="links__item">
        <a class="links__link" href="votinglist.html">
            <img src={Vote} alt="" class="links__icon"/>
          <span class="links__text" id="vote">VOTE HERE</span></a>
      </tr>
      <tr class="links__item">
        <a class="links__link" href="#">
            <img src={Result} alt="" class="links__icon"/>
          <span class="links__text" id="res">RESULT</span>
        </a>
        </tr>
        </ul>
    </table>
</div>
      </Container>
    </>
  );
}

export default Dashboard;

index.css

'.links' is the div that i want to convert in horizontal

.links {
  --link-size: calc(var(--base-grid)*20);
  color: var(--colour--white);
  position: absolute;
  display:flex;
  justify-content:baseline;
  align-items: baseline;
  width: auto;
  min-height: auto;
  list-style-type: none;
  flex-direction:row;
  border: 5px solid black;
}
.links__list {
  position: relative;
  list-style: none;
  text-decoration:none;
}
.links__item {
  width: var(--link-size);
  height: var(--link-size);
  position:relative;
  top: 0;
  left:0;
  margin-top: calc(var(--link-size)/-2);
  margin-left: calc(var(--link-size)/-2);
  --angle: calc(360deg/var(--item-total));
  --rotation: calc(140deg + var(--angle)*var(--item-count));
  transform: rotate(var(--rotation)) translate(calc(var(--link-size) + var(--base-grid)*2)) rotate(calc(var(--rotation)*-1));
  --item-count:5;
}



.links__link {
  opacity: 1;
  animation: on-load .3s ease-in-out forwards;
  animation-delay: calc(var(--item-count)*150ms);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background-color: var(--colour-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  text-decoration:none;
}

.links__icon {
  width: calc(var(--base-grid)*8);
  height: calc(var(--base-grid)*8);
  transition: all .1s ease-in-out;
  fill: var(--colour-black);
  height: 250px;
  width: 250px;
}

.links__text {
  color: black;
  position:relative;
  width: 100%;
  right: 38%;
  text-align: end;
  height: calc(var(--base-grid)*2);
  font-size: calc(var(--base-grid)*2);
  display: none;
  bottom: calc(var(--base-grid)*8.5);
  animation: text .3s ease-in-out forwards;
  text-decoration:none; 
  text-decoration: none;

}

Unexpected OUTPUT

[OUTPUT](https://i.stack.imgur.com/cF4Ve.png)

Answer 1

Because u r creating row for each image so it is expected behavior. What you actually need to do is add td for each image under single tr instead of multiple tr.

So here is a part you need to update your code with. You can just replace your part of that code with below code:

<table>
  <ul class="links__list">
    <tr class="links__item">
      <td>
        <a class="links__link" href="#" id="candilist">
          <img src="{Candidate}" alt="" class="links__icon" />
          <span class="links__text">CANDIDATE LIST</span>
        </a>
      </td>
      <td>
        <a class="links__link" href="votinglist.html">
          <img src="{Vote}" alt="" class="links__icon" />
          <span class="links__text" id="vote">VOTE HERE</span></a
        >
      </td>
      <td>
        <a class="links__link" href="#">
          <img src="{Result}" alt="" class="links__icon" />
          <span class="links__text" id="res">RESULT</span>
        </a>
      </td>
    </tr>
  </ul>
</table>

Make sure you style it afterword according to your need as the structure has changed in this code and you may need to add new class or remove old ones.