make the deparutre time and arrival time in single column, arrivaltime on top and departure just below arrival time

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bus Schedule and Timeline</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    />
    <style>
      body {
        font-family: "Roboto", sans-serif;
        background-color: rgb(243, 244, 246);
      }

      .station {
        position: relative;
        margin: 10px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .timeline {
        content: "";
        position: absolute;
        top: 50%;
        bottom: -100%;
        /* bottom: -65% or 65  or 100 i dont rememeber ; */
        border-left: 4px solid #4c51bf;
        z-index: 1;
      }

      .hoi {
        content: "";
        position: relative;
        width: 16px;
        height: 16px;
        left: 2px;
        background-color: #fff;
        border: 4px solid #4c51bf;
        border-radius: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }

      .time-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        z-index: 3;
        width: 20px;
      }

      .station-time {
        padding: 5px 10px;
        background-color: #4c51bf;
        color: #fff;
        border-radius: 12px;
        white-space: nowrap;
        z-index: 3;
        margin-right: 20px;
      }

      .station-name {
        flex-grow: 1;
        margin-left: 20px;
        margin-right: 20px;
        z-index: 3;
      }

      .header-row {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-weight: bold;
      }
      .green-bg {
        background-color: #10b981;
      }

      .green-border {
        border-color: #10b981;
      }

      .green-line {
        border-left-color: #10b981;
      }
      .rotate-180 {
        transform: rotate(180deg);
      }
    </style>
  </head>

  <body>
    <div class="container mx-auto px-4">
      <h1 class="text-3xl font-bold text-center my-4">Bus Schedule</h1>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded-md">
          <label
            for="departure"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
            >Departure</label
          >
          <input
            type="text"
            id="departure"
            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
            placeholder="Enter departure"
            value="kottayam"
          />
        </div>
        <div class="bg-gray-100 p-4 rounded-md">
          <label
            for="destination"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
            >Destination</label
          >
          <input
            type="text"
            id="destination"
            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
            placeholder="Enter destination"
            value="ponkunnam"
          />
        </div>
        <div class="bg-gray-100 p-4 rounded-md">
          <label
            for="time"
            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
            >Time</label
          >
          <input
            type="time"
            id="time"
            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
          />
        </div>
        <div class="bg-gray-100 p-4 rounded-md">
          <button
            type="submit"
            onclick="submitForm()"
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"
          >
            Submit
          </button>
        </div>
      </div>
    </div>

    <div class="bg-gray-100 font-roboto">
      <div class="max-w-xl mx-auto py-12 px-4 sm:px-6 lg:px-2">
        <div class="mt-8" id="scheduleContainer"></div>
      </div>
    </div>

    <script>
      let stationNames = [];

      fetch(
        "https://raw.githubusercontent.com/amith-vp/Kerala-Private-Bus-Timing/main/data%20conversion%20scripts/stations.txt"
      )
        .then((response) => response.text())
        .then((data) => {
          stationNames = data.split("\n");

          $("#departure").autocomplete({
            source: stationNames,
          });
          $("#destination").autocomplete({
            source: stationNames,
          });
        });
      async function submitForm() {
        const departure = document.getElementById("departure").value;
        const destination = document.getElementById("destination").value;
        const time = document.getElementById("time").value;
        // const time = "12:24";

        // Make API request
        const apiUrl = `https://busapi.amithv.xyz/api/v1/schedules?departure=${encodeURIComponent(
          departure
        )}&destination=${encodeURIComponent(destination)}`;

        try {
          const response = await fetch(apiUrl);
          const scheduleData = await response.json();

          updateSchedule(scheduleData, departure, destination);
        } catch (error) {
          console.error("Error fetching data:", error);
        }
      }

      function updateSchedule(scheduleData, departure, destination) {
        departure = departure.toUpperCase();
        destination = destination.toUpperCase();

        const scheduleContainer = document.getElementById("scheduleContainer");
        scheduleContainer.innerHTML = "";

        scheduleData.forEach((trip, index, array) => {
          const tripDetails = document.createElement("details");
          tripDetails.classList.add(
            "bg-white",
            "rounded-md",
            "shadow-md",
            "my-4",
            "overflow-hidden"
          );

          const departureStation = trip.stations.find((station) =>
            station.station.toUpperCase().startsWith(departure)
          );
          const arrivalStation = trip.stations.find((station) =>
            station.station.toUpperCase().startsWith(destination)
          );
          const departureTime = departureStation
            ? departureStation.departureTime
            : "N/A";
          const arrivalTime = arrivalStation
            ? arrivalStation.arrivalTime
            : "N/A";
          const tripSummary = document.createElement("summary");
          tripSummary.classList.add(
            "flex",
            "justify-between",
            "items-center",
            "px-4",
            "py-2",
            "cursor-pointer",
            "bg-blue-500",
            "text-white"
          );
          tripSummary.innerHTML = `
          <div class="flex justify-between items-center w-full">
  <span> ${departureTime} ➡️ ${arrivalTime}</span>
  <span style="margin-left: auto;">${trip.vehicle_number}</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
    `;
          tripSummary.addEventListener("click", (event) => {
            const icon = tripSummary.querySelector("svg");
            if (tripDetails.open) {
              icon.classList.remove("rotate-180");
            } else {
              icon.classList.add("rotate-180");
            }
          });

          tripDetails.appendChild(tripSummary);

          let vehicleDiv = document.createElement("div");
          //   vehicleDiv.textContent = `Vehicle Number: ${trip.vehicle_number}, Trip: ${trip.trip}`;
          scheduleContainer.appendChild(vehicleDiv);

          let hasDeparted = false;
          let hasArrived = false;

          trip.stations.forEach((station, stationIndex) => {
            let stationDiv = document.createElement("div");
            stationDiv.classList.add("station");

            if (station.station.toUpperCase().startsWith(departure)) {
              hasDeparted = true;
            }

            let arrivalTimeDiv = document.createElement("div");
            arrivalTimeDiv.classList.add("station-time");
            if (hasDeparted && !hasArrived) {
              arrivalTimeDiv.classList.add("green-bg");
            }
            arrivalTimeDiv.textContent = station.arrivalTime;
            stationDiv.appendChild(arrivalTimeDiv);
            stationDiv.classList.add(
              "px-4",
              "py-2",
              "border-b",
              "flex",
              "justify-between",
              "items-center",
              "last:border-b-0"
            );

            let timeWrapperDiv = document.createElement("div");
            timeWrapperDiv.classList.add("time-wrapper");

            let hoiDiv = document.createElement("div");
            hoiDiv.classList.add("hoi");
            if (hasDeparted && !hasArrived) {
              hoiDiv.classList.add("green-border");
            }
            timeWrapperDiv.appendChild(hoiDiv);

            if (stationIndex !== trip.stations.length - 1) {
              let timelineDiv = document.createElement("div");
              timelineDiv.classList.add("timeline");
              if (
                hasDeparted &&
                !hasArrived &&
                station.station.toUpperCase().startsWith(destination) === false
              ) {
                timelineDiv.classList.add("green-line");
              } else {
                timelineDiv.classList.add("blue-line");
              }
              timeWrapperDiv.appendChild(timelineDiv);
            }

            stationDiv.appendChild(timeWrapperDiv);

            let stationNameDiv = document.createElement("div");
            stationNameDiv.classList.add("station-name");
            stationNameDiv.textContent = station.station;
            stationDiv.appendChild(stationNameDiv);

            let departureTimeDiv = document.createElement("div");
            departureTimeDiv.classList.add("station-time");
            if (hasDeparted && !hasArrived) {
              departureTimeDiv.classList.add("green-bg");
            }
            departureTimeDiv.textContent = station.departureTime;
            stationDiv.appendChild(departureTimeDiv);

            scheduleContainer.appendChild(stationDiv);

            if (station.station.toUpperCase().startsWith(destination)) {
              hasArrived = true;
            }
            tripDetails.appendChild(stationDiv);
          });
          scheduleContainer.appendChild(tripDetails);
        });
      }
    </script>
  </body>
</html>