Here is an image of my request

![Here is an image of my request](https://i.stack.imgur.com/Glrv6.jpg)

I'm new to CSS and HTML positioning. I've spent three days trying to achieve this disposition to create an inline editor. I want to be able to hold 3 `<div>` or `<span>` or whatever that meet those condition an behavior.

1. Body can be any container.
2. The Pink Div can be anything but will have to contain the 3 other space holder inline
3. The Left Green box is for a variable text length like label
4. The Right Green box is for a variable number of action represented as button or icon.
5. The center green box is for an editor like an input text or multiple field inside a container..

what I did, ha ha ha, exploring every pseudo expert site on css positioning trying framework of all kind and never found a way to achieve this simply, clearly and easy to maintain without hack of any kind.... this is what I did.

Here's my code.

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

    <style>
        div.EditorFrame {
            background-color: lightcyan;
            padding: 5px;
        }

        span.LabelPanel {
            display: inline-block;
            background-color: lightskyblue;
        }

        span.EditorPanel {
            display: inline-block;
            background-color: lightpink;
        }

        span.ButtonPanel {
            display: inline-block;
            text-align: right;
            background-color: lightgreen;

        }
    </style>

    <script type="text/javascript">
        function body_onload() {
            //var editor = document.getElementById("txtAddress");
            //var editorcontainer = editor.parentElement;
            //editor.width = editorcontainer.clientWidth;
        }
    </script>
</head>

<body onload="body_onload()">
    <div class="EditorFrame">
        <span class="LabelPanel">
            <label for="AddressEditor" id="lblAddressEditor">Enter an address</label>
        </span>
        <span class="EditorPanel">
            <input id="AddressEditor" type="text" /></td>                
        </span>
        <span class="ButtonPanel">
            <button type="submit">Add</button>
            <!--button>Cancel</!--button>-->
        </span>
    </div>
</body>

</html>

```