Automatically calculate top and left based on the actual position of the textbox-CodePudding

I have to display a text field along with the magnifying glass in the start of the field. It will accompanied by a label to its left and text input to its right. The below is the HTML I have got with the inline CSS

    <html>
        <head>
            <title>Checking</title>
        </head>
        <body>
            <div>
                <label style="float:left">Search user</label>
                <div style="position:relative;display: block;">
                    <div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">&#128269;</div>
                    <input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
                </div>
                <div>
                    <input type="text" />
                </div>
            </div>
        </body>
    </html>

Without the label the text box works as I expected, but when I float the label to make the label, input textbox and the result textbox display in the same line, the magnifying glass is displayed over the table. I can move it by changing the 'left' for the div containing the icon. I also have to align the entire set of the fields to right of the screen. Is there a better way to do it?

The below is what i want

CodePudding user response：

Use display:flex with justify-content:flex-end. It solves the issue.

<!DOCTYPE html>
 <html>
        <head>
            <title>Checking</title>
        </head>
        <body>
            <div style="display:flex;justify-content:flex-end">
                <label style="float:left">Search user</label>
                <div style="position:relative;display: block;">
                    <div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">&#128269;</div>
                    <input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
                </div>
                <div>
                    <input type="text" />
                </div>
            </div>
        </body>
    </html>

CodePudding user response：

Is this what you are looking for?

label   div {
white-space: pre;
}
body{
float: right
}

<html>
        <head>
            <title>Checking</title>
        </head>
        <body>
            <div>
                <label style="float:left">Search user</label>
                <div style="position:relative;display: block;">
                    <div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">&#128269;</div>
                    <input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
                </div>
                <div>
                    <input type="text" />
                </div>
            </div>
        </body>
    </html>