JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form class="group-creator">
        <fieldset class="members">
            <legend>Title</legend>
            <div class="field">
                <div class="inner">
                    asdf
                </div>
            </div>
        </fieldset>
        <fieldset>
            <button type="submit">Create Conversation</button>
        </fieldset>
    </form>
</body>

CSS

body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}
.group-creator {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}
.group-creator fieldset {
    flex: 0 0 auto;
}
.group-creator fieldset.members {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: snow;
}
.members legend {
    flex: 0 0 auto;
}
.members .field {
    flex: 1 1 auto;
    /* 
    Will not grow to fill the space inside .members!
    
    If height set to 100%, it will grow properly in FF 
    but it overflows in Chrome.
    */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    background: white;
}
.members .field .inner {
    flex: 1 1 auto;
    background: lightblue;
}