CSS inline not working

Question

I'm having an issue where I cannot get an HTML element inline. I realise this reminiscent of issues that have occurred in the past, and that I can use methods such as float to get this to work, but I want to understand as well specifically why inline is not working.

Here is a JS Fiddle - http://jsfiddle.net/K27nT/2/. It's not 100% what the page looks like, but it shows my issue.

If you look towards the bottom, you'll see a link 'Remove Image'. This should be in line with Logo and Select Image, but it is not. I've set the CSS to display the elements inline, but no matter what I do, it does not work.

For the purposes of testing, I did change the display to inline-block, which despite working in the fiddle still fails in real life. I did also change the <a> element to <span>, just to see what happened, and that also failed. Thus I believe my issue is being caused previous to this element, but I do not know what could be causing it.

Can anyone please tell me why inline is not working in this case? Thanks.

As an FYI, here is am image of what the page actually looks like -

Answer 1

It is simply because there is still a div between the elements. In this case .loading-dd-options

You could solve this by setting it to be an inline element, as it is a block level element by default.

.loading-dd-options {
    display: inline;
}

jsFiddle demonstrating that here

Alternatively, you could also set the elements to inline-block, and it will have the same effect.

jsFIddle here