Display two fields side by side in react?

Question

I am trying to display two fields side by side using materialize css in react but failed to do so. One is a form which i will be using to add contacts and the other field at the right side will gonna be a card displaying information of the add contact. I tried using grids but no luck so far. Can anyone help me doing so?

Here is the code for the form...

<div class="row">
   <div class="col s6">
      <section class="section section-login">
         <div class="valign-wrapper row login-box">
            <div class="col card hoverable col card hoverable pull-8">
               <form action="">
                  <div class="card-content">
                     <span class="card-title">Add Contact</span>
                     <div class="row">
                        <div class="input-field col s12">
                           <label for="text">Name</label>
                           <input type="text" class="validate" name="name" id="flname" />
                        </div>
                        <div class="input-field col s12">
                           <label for="email">Email </label>
                           <input type="email" class="validate" name="email" id="email" />
                        </div>
                        <div class="input-field col s12">
                           <label for="text">Phone</label>
                           <input type="text" class="validate" name="phone" id="phone" />
                        </div>
                        <p>
                           <label>
                           <input name="group1" type="radio" checked />
                           <span>Personal</span>
                           </label>
                        </p>
                        <p>
                           <label>
                           <input name="group1" type="radio" />
                           <span>Professional</span>
                           </label>
                        </p>
                     </div>
                  </div>
                  <div class="card-action right-align">
                     <input type="reset" id="reset" class="btn-flat grey-text waves-effect" style={{backgroundColor:'lightgray'}}/>&nbsp;
                     <input type="submit" class="btn teal waves-effect waves-light" value="Add Contact"/>
                  </div>
               </form>
            </div>
         </div>
      </section>
   </div>
</div>

And Here is the card field.

<div className="row">
   <div className="col s6 offset-112">
      <div className="card blue-grey darken-1" style={{width: "50%"}}>
      <div class="card-content white-text">
         <span className={'new badge' + (type === 'professional' ? 'new badge red' : 'new badge steelblue')} data-badge-caption="" style={{backgroundColor: "steelblue"}}> {type}</span>
         <span className="card-title">{name}</span>
         <p>Email: {email}</p>
         <p>Phone: {phone}</p>
      </div>
      <div class="card-action">
         <button onclick="" type="button" name="edit" className="btn waves-effect" style={{backgroundColor: "black"}}>Edit</button> &nbsp;
         <button onclick="" type="button" name="delete" className="btn waves-effect" style={{backgroundColor: "indianred"}}>Delete</button> 
      </div>
   </div>
</div>
</div>

Answer 1

You're over-complicating the grid stuff. This is the markup to make two columns:

<div class="row">
  <div class="col s12 m6">
    <!-- content -->
  </div>
  <div class="col s12 m6">
    <!-- content -->
  </div>
</div>

s12 = take up 12/12 columns when small.

m6 = take up 6/12 columns from medium (601px wide).

To nest stuff in the second column, just include a new row inside the second column:

<div class="row">
    <div class="col s12">
        <!-- content -->
    </div>
    <div class="col s12">
        <!-- content -->
    </div>
    <div class="col s12">
        <!-- content -->
    </div>
</div>

Inside the second column, the s12 instruction is in relation to it's container. So in full you have:

<div class="row">
    <div class="col s12 m6">
        <!-- content -->
    </div>
    <div class="col s12 m6">
        <!-- content -->
        <div class="row">
            <div class="col s12">
               <!-- content -->
            </div>
            <div class="col s12">
               <!-- content -->
            </div>
            <div class="col s12">
               <!-- content -->
            </div>
        </div>
    </div>
</div>

You can make the parent columns smaller - the ones that split the area 50/50 from medium upwards - by using offsets, such as:

<div class="row">
  <div class="col s12 m4 offset-m2">
    <!-- content -->
  </div>
  <div class="col s12 m4 offset-m2">
    <!-- content -->
  </div>
</div>

https://codepen.io/doughballs/pen/jOrdWLa