Как сделать так, что бы объекты не налезали друг на друга

Question

Нужно сделать так, что бы кнопка воспроизведения была всегда в 100px справа от окончания названия, а название, само собой, всегда разной длины. Я уже чего только не пробовал - всегда выходит так, что длина названия не учитывается, и потому они налезают друг на друга

В общем, подскажите пожалуйста, как исключительно при помощи CSS это сделать?

.main-actionBar-ActionBar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    padding-top: 24px;
    position: relative;
}

.main-actionBar-ActionBarRow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 100%;
}

<section class="folder-folder-folder">
  <div class="contentSpacing main-entityHeader-container main-entityHeader-nonWrapped">
    <div class="main-entityHeader-backgroundColor"></div>
    <div class="main-entityHeader-backgroundColor main-entityHeader-overlay"></div>
    <div></div>
    <div class="main-entityHeader-headerText">
      <h2 class="main-entityTitle-subtitle main-entityTitle-small main-entityTitle-uppercase main-entityTitle-bold">Папка с плейлистами</h2><span dir="auto" class="main-entityHeader-title" draggable="true"><h1 class="main-type-bass" as="h1" dir="auto" style="padding: 0.08em 0px; font-size: 96px; line-height: 96px; visibility: visible; width: 100%;">TestName</h1></span></div>
  </div>
  <div class="main-actionBarBackground-background"></div>
  <div class="main-actionBar-ActionBar contentSpacing">
    <div class="main-actionBar-ActionBarRow"><button class="main-playButton-PlayButton main-playButton-primary" disabled="" aria-label="Слушать" style="--size:56px;"><svg height="28" role="img" width="28" viewBox="0 0 24 24" aria-hidden="true"><polygon points="21.57 12 5.98 3 5.98 21 21.57 12" fill="currentColor"></polygon></svg></button></div>
  </div>
  <div class="contentSpacing">
  </div>
</section>

Да, наверное стоило бы приложить побольше CSS, но его там слишком много, и я уже толком и не понимаю, что к чему относится, так что если у кого есть желание помочь - покажите пожалуйста, как это сделать на странице без стилей, а я уже буду дальше сам разбираться

Answer 1

Ну, что то типо того

<div>
<span class="main">Какой то текст<span class="button">➤</span><span>
</div>
<style>
div{
    background: #e0e0e0;
}
.main {
    font-size: 25px;
    color: #fff;
    line-height: 62px;
    background: black;
    padding: 10px;
}
.button{
    margin-left: 100px;
    background: #fff;
    font-size: 17px;
    height: 30px;
    text-align: center;
    width: 30px;
    display: inline-block;
    line-height: 32px;
    color: #000;
    border-radius: 50%;
}
</style>

Answer 2

ширина блока .cont, будет исходить от размера шрифта

.cont {
  background: brown;
  grid-gap: 15px;
  display: inline-grid;
  grid-template-columns: 1fr 100px;
  font-size: 50px;
  font-weight: 900;
}

.play {
  background: yellow;
  width: 100px;
  height: 100px;
}

<div class="cont">
  Nazvanie
  <div class="play"><svg height="28" role="img" width="28" viewBox="0 0 24 24" aria-hidden="true">
                <polygon points="21.57 12 5.98 3 5.98 21 21.57 12" fill="currentColor"></polygon>
            </svg></div>
</div>

БЛОГ НА HUSL

Как сделать так, что бы объекты не налезали друг на друга

Ответы (2 шт):