How can I get the toggle button / Chevron to the far right?

How it looks now:

How I want it to look:

I made it with the example accordion from the svelte docs.

Any help is appreciated

<script>
    import { slide } from "svelte/transition";
    export let entry
    let isOpen = false
    const toggle = () => isOpen = !isOpen
</script>
<style>
    button {
        border: none; 
        background: none;
        display:block; 
        color: inherit; 
        font-size: 16px; 
        cursor: pointer; 
        margin: 0; 
        padding-bottom: 0.5em; 
        padding-top: 0.5em;
        padding-left: 0;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    li {
        font-size: 16px;
        font-weight: 300;
        
    }
    svg { 
        transform: rotate(90deg);
        transition: transform 0.2s ease-in;
        margin-right: 0;   
    }
    
    [aria-expanded=true] svg { transform: rotate(0.75turn); }
</style>
<button on:click={toggle} aria-expanded={isOpen}> {entry[0]}<svg style="tran"  width="20" height="20" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 5l7 7-7 7"></path></svg> </button>
{#if isOpen}
<ul transition:slide={{ duration: 300 }}>
    {#each entry[1] as item}
    <li>{item}</li>
    {/each}
</ul>
{/if}

CodePudding user response：

The simplest solution is to use flexbox and space-between.

.accordion {
  display: flex;
  justify-content: space-between;
}

<div >
  text
  <svg width="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
  </svg>
</div>