html – Just how do I Enhance the Dimension of the card when the message location overruns, to ensure that the send switch shows up at all times

React Part: – This is the respond element that has the type in this type i have message location which has a set size of 100%

 import React from 'respond'.
import '././ Components/utilities. css'.
import './ Form.css'.

export default feature Kind() {
return (.
<< div className=" container-form card">>.
<< h2>> Demand a Trial<.
<< type activity=" https://formsubmit.co/ccf63a53d8e3631e23be6f390b5c9d9d" approach=" ARTICLE" name=" get in touch with" >>.

<< input kind=" message" name=" _ honey" design= {{display screen:' none'}}/>>.
<< input kind=" concealed" name=" _ captcha" worth=" incorrect"/>
<> < input kind=" concealed" name=" _ following" worth=" http://127.0.0.1:5500/index.html"/>

<> < div className=" form-control">
<> < input kind=" message" name=" name" placeholder=" Complete Name" needed/>>.
<.
<< div className=" form-control">
<> < input kind=" e-mail" name=" e-mail" placeholder=" Email" needed id=" e-mail"/>
<> .
<< div className=" form-control">
<> < input kind=" tel" name=" number" placeholder=" Mobile Number" needed/>>.
<.
<< div className=" form-control">
<> < input kind=" message" name=" nation code" placeholder=" Nation Code" needed/>>.
<.
<< div className=" form-control">
<> < input kind=" message" name=" tenative budget plan" placeholder=" Tenative Budget plan" needed/>>.
<.
<< div className=" form-control">
<> < input kind=" message" name=" business" placeholder=" Business Call" needed/>>.

<.

<< div className=" form-control">

<> < textarea kind=" message" name="" className=" summary"
placeholder=" Please describe what type of internet application do you intend to develop.".
/>>.

<.

<< input kind=" send" worth=" Send out" className=" btn btn-primary" ><> .
<.
<.
).
}

It's CSS:-

 container-form {
placement: loved one;.
top: 60px;.
right: -60 rapid eye movement;.
elevation: 600px;.
size: 400px;.
cushioning: 40px;.
z-index: 100;.
overflow: concealed;.
}

. container-form h2 {
font-size: 300;.
font-weight: vibrant;.
margin: automobile;.
}

. container-form. form-control {
margin: 30px 0;.
}

. container-form input[type="text"],
. container-form input[type="email"],
. container-form input[type="tel"]
{
boundary: 0;.
border-bottom: 1px strong #b 4b3cb;.
size: 100%;.
cushioning: 3px;.
font-size: 16px;.
}

. container-form textarea[type="text"] {
boundary: 1px strong #b 4b3cb;.
size: 100%;.
max-width: 100%;.
min-width: 100%;.
cushioning: 3px;.
font-size: 16px;.
elevation: 8rem;.
font-family: Arial, Helvetica, sans-serif;.


}

. container-form input: emphasis {
summary: none;.
}

Energy CSS:-

: origin {
-- message: # 010304;.
-- history: #eaf 3fa;.
-- main: # 2b73b6;.
-- second: #d 6e6f5;.
-- accent: # 3082cf;.
-- white: #fff;.
}
/ * Utilities */

. container {
max-width: 1100px;.
margin: 0 automobile;.
overflow: automobile;.
cushioning: 0 40px;.
}

. container-form {
max-width: 600px;.
margin: 0 automobile;.

cushioning: 0 40px;.
}

. card {
background-color: #fff;.
shade: # 333;.
border-radius: 10px;.
box-shadow: 0 3px 10px rgba( 0,0,0, 0.2);.
cushioning: 20px;.
margin: 10px;.
}
. btn {
display screen: inline-block;.
cushioning: 10px 30px;.
arrow: reminder;.
background-color: var(-- main);.
shade: #fff;.
boundary: none;.
border-radius: 5px;.
}
. btn-block {
size: 40%;.

display screen: block;.
margin: automobile;.
cushioning: 10px 30px;.
arrow: reminder;.
background-color: var(-- main);.
shade: #fff;.
boundary: none;.
border-radius: 5px;.

}
. btn-outline {
background-color: clear;.
boundary: 1px #fff strong;.
}

. btn: float {
change: range( 0.98 );.
}
/ * Backgrounds & & tinted switches */
. bg-primary,. btn-primary {
background-color: var(-- main);.
shade: #fff;.
}
. bg-secondary,. btn-secondary {
background-color: var(-- secondary-color);.
shade: #fff;.
}
. bg-dark,. btn-dark {
background-color: var(-- dark-color);.
shade: #fff;.
}

. bg-light,. btn-light {
background-color: var(-- light-color);.
shade: # 333;.
}

. bg-primary a,.btn-primary a,
. bg-secondary a,.btn-secondary a,
. bg-dark a,.btn-dark {a shade: #fff;.
}

/ * Text shades */

. text-primary {
shade: var(-- primary-color);.

}
. text-secondary {
shade: var(-- secondary-color);.

}
. text-dark {
shade: var(-- dark-color);.

}

. text-light {
shade: var(-- light-color);.

}

/ * Text Dimensions */

. lead {
font-size: 20px;.
}


. sm {
font-size: 1rem;.
}
. md {
font-size: 2rem;.
}

. mdl {
font-size: 2.5 rapid eye movement;.
}

. lg {
font-size: 3rem;.
}

. xl {
font-size: 4rem;.
}

. text-center {
text-align: facility;.
}


/ * typeface weights */

. bw {
font-weight: vibrant;.
}

/ * Alert */

. sharp {
background-color: var(-- light-color);.
cushioning: 10px 20px;.
/ * font-weight: vibrant; */.
margin: 15px 0;.
}

. sharp i {
margin-right: 10px;.

}

. alert-success {
background-color: var(-- success-color);.
shade: #fff;.

}

. alert-error {
background-color: var(-- error-color);.
shade: #fff;.

}

. alert-attention {
background-color: var(-- dark-color);.
shade: #fff;.
}

. flex {
display screen: flex;.
justify-content: facility;.
align-items: facility;.
elevation: 100%;.
}

. grid {
display screen: grid;.
grid-template-columns: repeat( 2, 1fr);.
space: 20px;.
justify-content: facility;.
align-items: facility;.
elevation: 100%;.
}

. grid-3 {
grid-template-columns: repeat( 3, 1fr);.
}
. grid-4 {
grid-template-columns: repeat( 4, 1fr);.
}

/ * Margin */
. my-1 {
margin: 1rem 0;.
}
. my-2 {
margin: 1.5 rapid eye movement 0;.
}
. my-3 {
margin: 2rem 0;.
}
. my-4 {
margin: 3rem 0;.
}
. my-5 {
margin: 4rem 0;.
}

. mx-1 {
margin: 0 1rem;.
}
. mx-2 {
margin: 0 2rem;.
}


. m-1 {
margin: 1rem;.
}
. m-2 {
margin: 1.5 rapid eye movement;.
}
. m-3 {
margin: 2rem;.
}
. m-4 {
margin: 3rem;.
}
. m-5 {
margin: 4rem;.
}




/ * Cushioning */
. py-1 {
cushioning: 1rem 0;.
}
. py-2 {
cushioning: 1.5 rapid eye movement 0;.
}
. py-3 {
cushioning: 2rem 0;.
}
. py-4 {
cushioning: 3rem 0;.
}
. py-5 {
cushioning: 4rem 0;.
}

. p-1 {
cushioning: 1rem;.
}
. p-2 {
cushioning: 1.5 rapid eye movement;.
}
. p-3 {
cushioning: 2rem;.
}
. p-4 {
cushioning: 3rem;.
}
. p-5 {
cushioning: 4rem;.
}

. pb {
padding-bottom: 2rem;.
}

I attempted to utilize overflow however it included a scroll bar. I intend to make the card boost its size when ever before the message location aspect raises in elevation and also overflows.