Wysihtml5 wysiwyg-float-left class on insert Image is not working

[Takuchirema]

I have been trying to figure this out but the code I have seen is not making the image float to the right or left of the container. below is my code:

                <button data-wysihtml5-command="bold" ><strong>B</button>
                <button data-wysihtml5-command="italic"><i>IT</button>
                <button data-wysihtml5-command="insertUnorderedList">list</button>
                <button data-wysihtml5-command="underline">underline</button>   
                <button  data-wysihtml5-command="indent" >indent</button>
                <button  data-wysihtml5-command="outdent" >outdent</button>
                <button type="button"  data-wysihtml5-command="insertImage" >image</button>
                 <button type="button" data-wysihtml5-action="change_view" href="javascript:;" unselectable="on">html</button>
                <!-- <button data-wysihtml5-command="insertImage">insert image</button> -->
                
                
                <div id="insertimage" style="display:none;margin: 20px;" data-wysihtml5-dialog="insertImage">
                  <label>
                    Image:
                    <input data-wysihtml5-dialog-field="src" id="imageload" value="http://">
                  </label>
                  
                  
                   <label>
                    Align:
                    <select data-wysihtml5-dialog-field="className">
                      <option value="">default</option>
                      <option value="wysiwyg-float-left">left</option>
                      <option value="wysiwyg-float-right">right</option>
                    </select>
                  </label>
                  
                  <button type="button" data-wysihtml5-dialog-action="save">OK</button>
                  <button type="button" data-wysihtml5-dialog-action="cancel">Cancel</button>
                </div>

            </div>