对齐标签，跨度和按钮

Question

I have the next elements defined like this:

label(Name) span(Surname) span(button)

which gives me the result as shown below:

Name: James Change Surname: Bond Change Age: 56 Change

Now I'd like to align my elements like this:

Name: James Change Surname: Bond Change Age: 56 Change

I know, that one way is to use table. I don't want to use table. I have managed to align the button button to right with float:right but I haven't managed to separate surname from name. I tried padding/margin left on both and they moved away but then they moved unequally. Also, this way resizing the window causes the text to overflow on each other. Any ideas how to solve this?

Answer 1

Simple:

HTML

 <div class="row">
   <label>Name</label> 
   <span>John Doe</span>
   <span>Change</span>
 </div>

CSS:

.row label, .row span {
  display: inline-block;
  vertical-align: top;
}

See it working:

 .row label, .row span { display: inline-block; vertical-align: top; border: 1px solid black; padding: 10px; margin: 0 2px; } 

 <div class="row"> <label>Name</label> <span>John Doe</span> <span>Change</span> </div>