Show icon to the right of a Headless UI Popover.Button - reactjs

Question

I am using the Headless Ui Popover.Button and I am not displaying any default text so I want the Chevron to show to the right. it does this when I have an item selected but not when nothing is in the box.
<Popover.Button className="flex justify-between w-60 text-sm font-bold uppercase items-center h-14 px-4 border-t border-b border-black rounded-none">
{
types.map((type) => (type.isSelected ? type.name : ''))
}
{open ? (
<ChevronUpIcon className="h-5 w-5 text-black" />
) : (
<ChevronDownIcon className="h-5 w-5 text-black" />
)}
</Popover.Button>
if i change the justify-between to justify-end it moves it but then the selected text is moved to the right as well.
any help would be great.
Thanks

Answer 1

Just wrap the first part in another div.
<div>
{
types.map((type) => (type.isSelected ? type.name : ''))
}
</div>
var checkbox = document.querySelector("input");
var buttonText = document.querySelector("#buttonText");
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
buttonText.innerHTML = "Item 1"
} else {
buttonText.innerHTML = ""
}
})
<link href="https://unpkg.com//tailwindcss#2.1.1/dist/tailwind.min.css" rel="stylesheet" />
<button class="flex justify-between w-60 text-sm font-bold uppercase items-center h-14 px-4 border-t border-b border-black rounded-none">
<div id="buttonText">
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<input type="checkbox" class="mt-4">Item 1</input>