Stick element close to paragraph's words when screen resize

Question

I have a flex positioned block with paragraphs and buttons. When I resize the viewport, every paragraph becomes shorter and buttons stay on the right of the paragraph's border. I want it to be sticked to the end of words, but not the whole paragraph. How to do it?

I tried with 'width: min/max-content', but it doesn't have the effect that I want.

Codepan

.test {
  width: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.test__item {
  display: flex;
  column-gap: 10px;
}

.test__column {
  width: 50%;
  border: 1px solid green;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding: 5px;
}

.test__paragraph {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.test__button {
  max-width: 50px;
  width: 100%;
  height: 20px;
  border: 1px solid blue;
}

<section class="test">
  
  <div class="test__item">
    <div class="test__column">
      <p class="test__paragraph">some very very very long text with extreamlylongwords</p>
      <button class="test__button"></button>
    </div>
    <div class="test__column">
      <p class="test__paragraph">
              Curabitur fringilla luctus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae lacinia mi. 
      </p>
    </div>
  </div>
  
  <div class="test__item">
    <div class="test__column">
      <p class="test__paragraph">long text with extreamlylongwords</p>
      <button class="test__button"></button>
    </div>
    <div class="test__column">
      <p class="test__paragraph">
              Curabitur fringilla luctus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae lacinia mi. 
      </p>
    </div>
  </div>
  
  <div class="test__item">
    <div class="test__column">
      <p class="test__paragraph">some very long text with extreamlylongwords</p>
      <button class="test__button"></button>
    </div>
    <div class="test__column">
      <p class="test__paragraph">
              Curabitur fringilla luctus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae lacinia mi. 
      </p>
    </div>
  </div>
  
  
</section>

Stick element close to paragraph's words when screen resize

0 Answers0