css - How can I fit the label and input fields into the container, without overlapping?

Question

I try to align the label and input fields so that they are within the container and do not overlay. That does not work for input and labels. If I replace it by H1 or anything else, then it works.

    <v-main>
      <v-content__wrap>
        <div class="center-container mb-10">
          <div class="calculator">
            <div class="container">
              <h1 class="headline pb-1 pt-5">Calculator</h1>
              <p class="disclaimer pb-2" style="font-size: 15px">
                Default values do not imply return expectations. Change them up
                as necessary.
              </p>

              <v-layout row>
                <v-flex xs8>
                  <v-form>
                    <v-layout row wrap>
                      <v-flex pr-3 xs12 sm6>
                        <v-field mb-3>
                          <label>Calculate</label>
                          <v-input number> </v-input>
                        </v-field>
                      </v-flex>
                    </v-layout>
                  </v-form>
                </v-flex>
                <v-flex xs4> </v-flex>
              </v-layout>
            </div>
          </div>
        </div>
      </v-content__wrap>
    </v-main>```

question from:https://stackoverflow.com/questions/66050794/how-can-i-fit-the-label-and-input-fields-into-the-container-without-overlapping

Answer 1

Waitting for answers