0

I want to have buttons at the side of a paragraph, vertically aligned with elements in that paragraph:

<div style="width:20%">
  This is an example text. This is an example text. This is an example text. This is 
  an example text. This is an <span>A</span> <button>Aligned with A</button> example text. This is an example text. 
  This is an example text. This <span>B</span> <button>Aligned with B</button> is an example text. This is an example 
  text. This is an example text. This is an example text. This <span>C</span><button>Aligned with C</button> is an
  example text. This is an example text. 
</div>

In this example, I want to have one button vertically aligned with each of the elements in the text. I cannot set the vertical position fixed because they number of rows in the text varies with actual width of the wrapper div, and I cannot use display: table because I don't want a line break in the text paragraph. The output should look like this:

illustration of how it should look like

Since the width of the wrapper div is determined by the browser, I don't know where the lines break and therefore don't know the vertical alignment of the text. Is there a way to align the buttons with specific elements in the div?

This is different from just vertically aligning two columns since the text paragraph breakpoints are independent of the button occurrences on the right.

user2212461
  • 3,105
  • 8
  • 49
  • 87
  • 1
    why the duplicate and the downvote? if there is something unclear please ask to clarify @connexo – user2212461 Jul 18 '18 at 01:55
  • 1
    Do the buttons have the same known width? If so, you can `float` them to `right` and then move past the right container edge via negative `margin-right` – Ilya Streltsyn Jul 18 '18 at 05:43
  • The width of the button is known, how would I move the content after the button 'past the right container', could you provide code? – user2212461 Jul 18 '18 at 11:53
  • 1
    Please see this fiddle: http://jsfiddle.net/n8sd479r/ (hope I understood the problem correctly) – Ilya Streltsyn Jul 18 '18 at 13:01
  • this works, do you mind pasting your code as response here so i can accept? – user2212461 Jul 18 '18 at 14:34
  • I would post it, but it seems that the question is already closed, so I just can't:(. I agree that it is definitely _NOT the duplicate_ of the suggested "already answered" question, so I nominated it for reopening. – Ilya Streltsyn Jul 18 '18 at 15:08
  • 1
    This question seems much more relevant here than the suggested "duplicate": https://stackoverflow.com/q/48504231/2533215 – Ilya Streltsyn Jul 18 '18 at 15:10

1 Answers1

3

You can use display:table property and make your div's behave like a HTML table. See docs https://www.w3schools.com/cssref/pr_class_display.asp

And use vertical-align to align your items.

.paragraph-wrap {
  display: table;
}
.paragraph {
  display:table-row;
}
.paragraph > *{
  display:table-cell;
  vertical-align: middle;
}
<div class="paragraph-wrap">
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.  This is an example text. This is an example text. This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
</div>
caiovisk
  • 3,667
  • 1
  • 12
  • 18