How to make the "input" the same width as the "a-lot-of-positivity" class?

HTML & CSS
1

How to make the “input” the same width as the “a-lot-of-positivity” class, in absolute position, in all resolutions using as little @media as possible?

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                height: 50%;
                width: 100%;
                background: green;
            }
            .happiness{
                margin: 10%;
                width: 80%;
                color:#fff;
            }
            .a-lot-of-positivity{
                margin: 5%;
                width: 90%;
                height: 15vw;
                background: yellow;
            }
            input{
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="happiness">
            <h1>Peace and love</h1>
            <div>Lots of energy, peace and positivity.
                <span>Much happiness</span>
                <div class="a-lot-of-positivity">
                    <input type="text">
                </div>
            </div>
        </div>
    </body>
</html>
2

change

            input{
                position: absolute;

            }

to

            input{
                width: 100%;
                box-sizing: border-box;
            }
1 Like
4

Solved thank you very much.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.