CSS div position based on parent element-CodePudding

I struggle with an responsive attempt. I got two columns, where the width is based on VW. The bigger column contains am div element to close. This element should have always the same top and left margin, in relatives to the parent column. No matter if I resize the window.

Currently if I resize the distance between changes, either increase or shrinks to a point, where my close div get out of position c

    body {
        background: grey;
        overflow: hidden;
    }

    .container-fluid {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
        
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 50vh;
        background-color: #fff;
        background-clip: border-box;
        border: 0 solid rgba(0, 0, 0, 0.125);
        border-radius: 1rem;
        margin: 0.5em;
        padding: 0.5em;
    }

    .title {
        margin: 0.5em;
        font-size: 3em;
        float: left;
    }

    .close-btn {
        position: absolute;
        float: left;
        cursor: pointer;
        font-size: 2em;
        left: 57vw;
        top: 2vh;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Fixed Close Position</title>

    <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
</head>

<body>
    <div >
        <div >
            <div >
                <div >Headline</div>
                <div ><i ></i></div>                
            </div>
        </div>
        <div >
            <div >
                <div >News</div>
            </div>
        </div>
    </div>
</body>

</html>

ompletely. I am stuck.

CodePudding user response：

Try this,

body {
        background: grey;
        overflow: hidden;
    }

    .container-fluid {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 50vh;
        background-color: #fff;
        background-clip: border-box;
        border: 0 solid rgba(0, 0, 0, 0.125);
        border-radius: 1rem;
        margin: 0.5em;
        padding: 0.5em;
    }

    .title {
        margin: 0.5em;
        font-size: 3em;
        float: left;
    }

    .close-btn {
        position: absolute;
        cursor: pointer;
        font-size: 2em;
        left: auto;
        top: 2vh;
        right: 2vh;
    }