Estoy tratando de hacer que esos botones e iframes estén uno al lado del otro en lugar de ser verticales.

Imagen

Son los del lado derecho de la ventana. Como puede ver, están ordenados verticalmente en lugar de horizontalmente. Quiero hacerlo para que pueda cambiar de un botón a otro y hacer que el otro no muestre el elemento como los de la izquierda (hace clic en uno de esos dos botones y mostrará un gráfico diferente y hará que el otra invisible). En cambio, en este, quiero que muestren un iframe diferente para cada botón.

Ya hice esto:

 function createIframes() { for (let i = 0; i < spectra_list.length; i++) { let button = document.createElement("button"); let iframe = document.createElement("iframe"); button.innerText = "Spectre "+ (i+1); button.style.backgroundColor = colors[i]; button.classList.add("h-10", "py-1", "text-xl", "text-gray-100", "font-medium", "transition-colors", "hover:text-gray-900", "focus:outline-none", "display:inline-block"); iframe.classList.add("h-full", "border-gray-400", "rounded-r", "bg-gray-50","display:inline-block"); div_header.appendChild(button); div_header.appendChild(iframe); let buttons = [button]; let iframes = [iframe]; button.addEventListener("click", function (){ //// }) }

A continuación tengo el HTML:

 <div class="flex flex-row justify-center my-4"> <div class="relative w-1/2 flex flex-col mr-1" id="div-header-overplot"> // buttons and iframes here </div> </div>