Prevent line break between two elements in CSS

For some basic layout work I'm doing, I'd like links that immediately follow a price to always be shown on the same line as the price. The price text is wrapped in a `<span class="price">` tag while the link uses the buy-link class as in `<a href="/buy" class="buy-link">Buy Now</a>`. I'm looking for CSS that will automatically prevent line breaking between the `span` and `a` tag but I'm either missing something or it can't be done. I can easily prevent line breaks within the two tags - but not between them. I want to avoid wrapping both tags in a `span` with a `white-space: nowrap` manually and use pure CSS if possible. Update: The HTML looks something like the following. It's not the real code but very similar. ``` <style> .price{ font-weight: bold; } .buy-link{ color: green; } </style> <span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a> ``` If the link happens to be near the page edge - or block edge in a `<div>` or `<table>` browsers will wrap the Buy Now link to the next line. Separating the two elements.