I'm trying to get those buttons and iframes to be next to each other instead of being vertical.

Image

They are those on the right side of the window. As you can see they are ordered vertically instead of horizontally. I want to make it so that you can switch from one button to the other and make the other one not display the element like the ones on the left (you click on one of those two buttons and it will display a different chart and make the other one invisible). Instead ,in this one, i want them to display a different iframe for each button.

I already did this:

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 (){
        ////
    })
}

Next i have the 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>