Автоматически c разрыв строки с использованием подробного сводного элемента

Question

Я хочу выровнять текст резюме. Текст выровнен по центру, но текст будет в новой строке, а стрелка для открытия деталей находится в отдельной строке.

Желаемый вид: стрелка находится в той же строке, что и сводное содержание, а также по центру с ним. Детали должны быть выровнены по левому краю.

Желаемый вид :

Текущие идеи исходного кода :
Но все они имеют дополнительный разрыв строки после стрелки.

    .center {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

<p>
  <details>
        <summary>
            <div class="center">
               Some summary in center
            </div>
        </summary>
        <div>
            <p>
               Some more details
            </p>
        </div>
    </details>
</p>

Answer 1

Поместите свой класс .center в тег <summary>:

.center {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<details>
    <summary class="center">
           Some summary in center       
    </summary>
        <p>
           Some more details
        </p>
</details>