Prevent sibling from being pushed using flex - html

Question

I have an image, and I display a text to the right and bottom of it , as can be seen in the first snippet(view snippet in full window). Now I want to add another text, and that it will be to the top right of the image, above the other text, but it pushes the bottom text to the right. I want both texts to be relative to the image, but the last paragraph seems to be relative to the sibling.
(**Sorry about the many html tags, I'm using a css framework also)
.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>
And this is the snippet depicting the problem:
.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

Here is my solution
Had to change your structure
<div class=" par">
<label class="label">
<p id="click">Click Me!</p>
</label>
<p>Name Placeholder</p>
</div>
Then
added this to 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>

Answer 2

I usually dislike position:absolute; but it looks like it could be a fair use here .
.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>