Vuetify - Flexbox - wrong flex row setup

Question

When i write the following code ( see complete CodePen test )I cannot get the radio-group and tthe firstName & lastName on the same row... I want to wrap them only on smaller screen width ( mobile )

    <div id="app">
      <v-app id="inspire">
        <v-container  grid-list-xl text-xs-center fluid>
          <v-layout row wrap>
             <v-flex  xs8 offset-xs2>
               <h4>Thank you for contacting us!<h4>
               <v-container>
                  <v-layout row wrap justify-left>
                    <v-flex xs-6 class="wrapper-l">
                      <form>
                        CONTACT FORM
                        <v-container>
                          <v-layout  column wrap justify-center>
                            <v-flex>
                              <v-container class="cont-2">
                                <v-layout row wrap justify-left>
                                  <v-flex>
                                        <v-radio-group row>
                                            <v-radio class="radio" label="Mrs"></v-radio>
                                            <v-radio class="radio" label="Mr"></v-radio>
                                        </v-radio-group>
                                  <v-text-field class="small-tf" label="first Name"></v-text-field>
                                  <v-text-field class="medium-tf" label="family Name"></v-text-field>
                                  </v-flex>
                                </v-layout>
                              </v-container>
                              <v-text-field label="email"></v-text-field>
                              <v-text-field label="message"></v-text-field>
                            </v-flex>
                          </v-layout>
                          <v-layout row no-wrap>
                            <v-flex>
                              <v-btn>CLEAR</v-btn>
                              <v-btn>SUBMIT</v-btn>
                            </v-flex>
                          </v-layout>
                        </v-container>
                      </form>
                    </v-flex>
                    <v-flex xs-6 class="wrapper-r">
                      INFOS
                      <v-card light flat>
                        <h4>email address </h4>
                        <p>ourcompany@example.com</p>
                        <h4>PHONE</h4>
                        <p>ding-ding /dong-dong</p>
                        <h4>ADDRES</h4>
                        <p>Our Company<br/>Somewhere<br/>on the planet</p>
                        <h4>WE ARE SOCIAL TOO</h4>
                        <p>
                          <a href="#">FBK</a>
                          <a href="#">LKD</a>
                          <a href="#">TWT</a>
                        </p>
                      </v-card>
                    </v-flex>
                  </v-layout>
                </v-container>
             </v-flex> 
           </v-layout>
       </v-container>
      </v-app>
    </div>

here is the captured output :

Answer 1

Check the docs on Vuetify's grid system: https://vuetifyjs.com/en/layout/grid#introduction

There are several issues in your code structure, e.g. there is no justify-left but justify-start and you should set the breakpoints if you want to wrap it for the different screen sizes.

Something like this should do:

<v-container class="cont-2">
  <v-layout row wrap>
    <v-flex xs12 sm4>
      <v-radio-group row>
        <v-radio class="radio" label="Mrs"></v-radio>
        <v-radio class="radio" label="Mr"></v-radio>
      </v-radio-group>
    </v-flex>
    <v-flex xs12 sm4>
      <v-text-field label="first Name"></v-text-field>
    </v-flex>
    <v-flex xs12 sm4>
      <v-text-field label="family Name"></v-text-field>
    </v-flex>
  </v-layout>
</v-container>