Предотвратите толчок родного брата, используя flex

Question

У меня есть изображение, и я отображаю текст справа и снизу от него, как видно из первого фрагмента (просмотр фрагмента в полном окне).Теперь я хочу добавить еще один текст, и он будет в правом верхнем углу изображения, над другим текстом, но он выдвигает нижний текст вправо.Я хочу, чтобы оба текста были относительно изображения, но последний абзац, кажется, относительно родного брата.(** Извините за множество HTML-тегов, я также использую CSS-фреймворк)

.justify-content-end {
            align-self: flex-end;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet"/>
                        <div class="level">
                            <div class="level-left">
    
                                <div class="level-item">                                    
                                    <figure class="image is-128x128">
                                          <img src="https://bulma.io/images/placeholders/128x128.png">
                                    </figure>                                    
                                </div>
                                <div class="level-item justify-content-end">
                                    <p>Hello World</p>
                                </div>   
                            </div>
                        </div>

И это фрагмент, изображающий проблему:

.justify-content-start {
  align-self: flex-start;
}

.justify-content-end {
  align-self: flex-end;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
  <div class="level-left">

    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </figure>
    </div>
    <div class="level-item justify-content-start">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World</p>
    </div>
  </div>
</div>

Answer 1

Мне обычно не нравится position:absolute;, но, похоже, здесь это может быть справедливым.

.justify-content-start {
  align-self: flex-start;
  min-height: 1.4em; /* keep room for the absolute child */
}

.justify-content-end {
  align-self: flex-end;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
}

@media (min-width: 768px) {
  #click {
    position: absolute;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level">
  <div class="level-left">

    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </figure>
    </div>
    <div class="level-item justify-content-start">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World</p>
    </div>
  </div>
</div>

Answer 2

Вот мое решение

Пришлось изменить вашу структуру

<div class=" par">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
        <p>Name Placeholder</p>
 </div>

Затем

добавил это в css

     .main .stretch{
        align-items: stretch;
      }
     .par{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
      }

.justify-content-start {
  align-self: flex-start;
}

.justify-content-end {
  align-self: flex-end;
}

.main .stretch {
  align-items: stretch;
  text-align: center;
}

#click {
  text-align: center;
  width: 128px;
  cursor: pointer;
  border: 1px solid red;
  margin: auto;
}

.par {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="level main">
  <div class="level-left stretch">

    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </figure>
    </div>
    <div class=" par">
      <label class="label">
         <p id="click">Click Me!</p>
       </label>
      <p>Name Placeholder</p>
    </div>
  </div>
</div>