Can someone assist me with aligning checkbox divs on a form?

Question

I have a form that I am trying to look like this on my website.

So far I've been able to render the image almost exactly. When the checkbox item is a certain length everything goes great. However, I realized that when I change the name of the checkbox item to something shorter or longer, I discovered that my form becomes a terrible mess. This is what the image looks like right now.

As you can see the checkboxes are all screwy and don't align at all.

The HAML and CSS files that I have looks like this.

       %div
        .stack-title
          = stack.title
        .stack-checkbox
          = check_box_tag 'stacked', 0, false, 'data-stack' => stack.to_param,
                                               'data-project' => @project.to_param,
                                               'data-stackentry' => find_stack_entry(stack, @project).to_param,
                                                target: counter
        .stack-message.message-position{ id: "message#{counter}" }
        = image_tag('spinner.gif', class: 'hidden', id: 'related_spinner', target: counter)

.stack-title
  width: 180px
  display: inline-block

.stack-checkbox
  display: inline-block
  width: 100px
  text-align: right


.stack-message
   display: inline-block

I was hoping if someone could point me to a JS Fiddle somewhere that can help me accomplish what I'm trying to achieve. This HTML/CSS isn't the only configuration I've tried but I've tried so many that I can't possibly post it all on this question but basically I've been trying to mess around with margin, text-align, vertical-align, and float. So far no luck. Could someone please help me......I've been working on this for far too long :/. Thanks.

Answer 1

Create a div around the check boxes and the text. float text left and float check box right