reactjs - css: How can I set the position of an element?

Question

I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.

Here's the code :

<Grid item md={6} lg={6} xs={12}>
                                        <div className="milestone-due-date">
                                            DUE DATE
                                        </div>
                                        
                                        <label>
                                                <DatePicker
                                                dateFormat="MM/dd/yyyy"
                                                margin="normal"
                                                selected={due_date}
                                                placeholderText="Due Date"
                                                onChange={date=>this.handleChangeDate(date,'due_date')}
                                                maxDate={new Date()}
                                                className={`milestone-input-due-date`}
                                                />
                                                <img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>                                                        
                                        </label>
                                        
                                    {due_date_error && (
                                        <div className="input-error-style">{due_date_error}</div>
                                    )}
                        </Grid>

---

question from:https://stackoverflow.com/questions/66061135/css-how-can-i-set-the-position-of-an-element

Answer 1

<div className="milestone-due-date">
    DUE DATE
    <label>
            <DatePicker
            dateFormat="MM/dd/yyyy"
            margin="normal"
            selected={due_date}
            placeholderText="Due Date"
            onChange={date=>this.handleChangeDate(date,'due_date')}
            maxDate={new Date()}
            className={`milestone-input-due-date`}
            />
            <img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>                                                        
    </label>
</div>
{due_date_error && (
    <div className="input-error-style">{due_date_error}</div>
)}

css

.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}