But I have a bad feeling, that I'm doing something really wrong. Is there a better approach/solution to this problem?
The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your div
s that describe what their content is, and style them that way.
<ul class="title-content-list">
<li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>
And CSS
ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }
Or something along those lines.
It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right
positions elements on the left and .left
on the right.