#notes {
    display: flex;
    flex-direction: column;
}

#notes div {
    width: 100%;
    position: relative;
}

#text {
    padding: 2.5%;
    width: 100%;
    resize: vertical;
    font-size: calc(1vw + 10px);
    box-sizing: border-box;
    min-height: 50px;
}

@media only screen and (min-width: 700px) and (max-width: 999.5px),
        only screen and (min-width: 1250px) {    
    #notes {
        display: inline-block;
        vertical-align: top;
        width: calc(50vw - 490px);
        top: 0;
        position: absolute;
    }

    #text {
        resize: none;
        min-height: 443px;
        height: calc(307.5px + 41.5vh);
        width: calc(100vw - 615px);
        margin: 5px;
        margin-right: 2.5px;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1250px) {
    #notes {
        max-width: 575px;
    }
}

@media only screen and (min-width: 1250px) {
    #notes {
        position: relative;
        top: -10px;
    }

    #text {
        min-height: 369px;
        height: calc(100vh - 85.5px);
        width: calc(50vw - 500px);
    }
}