How to add spacing between two span elements

Question

I have two span elements. I want them to sit side-by-side and contain some text. Is this possible? If so what am I doing wrong?

.added-box{
 background-color:#06C;
 padding:8px;
 margin:8px;
}

.edited-box{
 background-color:#093;
 padding:8px;
 margin:8px;

}

And the page code is:

<p align="right">
   <span class="edited-box">sfds<span>
   <span class="added-box">sfds<span>
</p>

Edit: What I am hoping to get is a box, somewhat like the one on this page which has my name, time I asked the question and my points. I don't mind how I get it, but css is preferred, it looks like StackOverflow is using a table. Is this the only way to do this?

Answer 1

You have two typos in your HTML where you are failing to close the <span> tags with </span>. It should be:

<p align="right">
  <span class="edited-box">sfds</span>
  <span class="added-box">sfds</span>
</p>

This typo is causing your edited-box class to wrap everything and therefore the CSS is breaking.