Columns in CSS not nesting as expected

Question

I have a website where there is an advanced search (red box) and then user profiles are displayed (white box). I want it to look like this:

One column dedicated to the search and three columns dedicated for the user profiles. What I now have does this:

My code:

    <div class="container">
    <div class="row">
        <div class="col s12 m6 l3">
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content center">
                        <div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
                        <span class="card-title2">Advanced search</span>
                        </div>
                        <%= simple_form_for @search do |s| %>
                            SEARCH FORM GOES HERE
                        <% end %>
                    </div>
                </div>
            </div>
        </div>
    <% @userinfors.each do |user| %>
        <% if user.videos.present? && user.resumes.present? && user.othervideos.present? && user.workpaces.present? && user.sandws.present? %>
            <div class="col s12 m6 l9">
                <div class="col s12 m6 l4">
                    <div class="card white">
                        <div class="card-content center">
                            USER PROFIL GOES HERE                         
                        </div>
                    </div>
                </div>  
            </div>            
        <% end %>
    <% end %>
    </div>
</div>

What can I try next?

Answer 1

try this:

<div class="container">
    <div class="row">
        <div class="col s12 m6 l3">

            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content center">
                        <div style="margin-top: -20px; width: 113%; height: 40px; background-color: #0288d1;margin-left: -21px;">
                        <span class="card-title2">Advanced search</span>
                        </div>
                        <%= simple_form_for @search do |s| %>
                            SEARCH FORM GOES HERE
                        <% end %>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l9">
           <% @userinfors.each do |user| %>
              <% if user.videos.present? && user.resumes.present? && user.othervideos.present? && user.workpaces.present? && user.sandws.present? %>
                <div class="col s12 m6 l4">
                    <div class="card white">
                        <div class="card-content center">
                            USER PROFIL GOES HERE                         
                        </div>
                    </div>
                </div>  
              <% end %>
           <% end %>
        </div>            
    </div>
</div>

IT will look like this. https://jsfiddle.net/0sLae9sn/