How to divide divs into columns and wrap and image within - php

Question

I am attempting to create a profile page that has a number of div's that I need to divide into two columns with an image at the top. I have the image displayed fine but I can't seem to get the information to separate into two columns... at the moment it's all flowing down the page.
Below is my code that I am developing in cakephp:
<!--Profile Code-->
<div class="users view large-9 medium-8 columns content">
<div class="row">
<!--box style-->
<div class="panel panel-default">
<!--whitespace around panel-->
<div class="panel-body">
<div>
<h4 style="color:#00b1b1;"><?= h($user->name) ?></h4>
</div>
<div class="box box-info">
<div class="box-body">
<div align="left"><img height="200px" width="200px" alt="Users Picture" src="">
<input id="profile-image-upload" class="hidden" type="file">
</div>
<div class="col-sm-5">First Name: </div><div class="col-sm-4"><?= h($user->first_name) ?></div>
<div class="col-sm-5">Last Name:</div><div class="col-sm-4"> <?= h($user->last_name) ?></div>
<div class="col-sm-5">Username:</div><div class="col-sm-4"> <?= h($user->username) ?></div>
<div class="col-sm-5">Email:</div><div class="col-sm-4"> <?= h($user->email) ?></div>
<div class="col-sm-5">Role:</div><div class="col-sm-4"><?= h($user->role) ?></div>
<div class="col-sm-5">User ID:</div><div class="col-sm-4"><?= $this->Number->format($user->id) ?></div>
<div class="col-sm-5">Created:</div><div class="col-sm-4"><?= h($user->created) ?></div>
<div class="col-sm-5">Modified:</div><div class="col-sm-4"><?= h($user->modified) ?></div>
<div class="col-sm-5">Active:</div><div class="col-sm-4"><?= $user->active ? __('Yes') : __('No'); ?></div>
<!-- /.box-body -->
</div>
<!-- /.box info -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>