Align columns on single row CSS to create labels for a toggle

I created a toggle switch (just a fancy CSS input checkbox type) taken from w3schools. This toggle checkbox will switch between two states : Draw and Erase.

I am trying to add some "label" to my checkbox using the the W3.CSS Responsive classes, w3-.row. HTML Code:

<div class="container-fluid"> <div class="row content"> <div class="col-sm-2 sidenav text-center" id="left_col"> <div class="well "> <div class="w3-row w3-container"> <div class="w3-col s4 w3-center" style="width:none"> <p>Draw</p> </div> <div class="w3-col s4 w3-center" style="width:none"> <label class="switch"> <input type="checkbox" id="editor_draw_erase"></input> <div class="slider round"></div> </label> </div> <div class="w3-col s4 w3-center" style="width:none"> <p> Erase </p> </div> </div> </div> </div> </div> How it looks (The fiddle): http://ift.tt/2biwzsB

How I wish it would like: toggle switch

Maybe w3-row/col is not the best approach to label my toggle switch as I am very new to CSS and everything web-programming. I tried also styling using the .table but same results. Looking forward to suggestions.