React semantic ui multi column multi row form

What i've done for the job is to use 3 columns for the first Codepen. The second Codepen is to use 2 column. You can see in the example. See what is better for you.

I prefer to use grid for the responsive design. The table is limited for this aspect.

The 3 columns

<h2>Ban profile</h2>
    <div class="ui stackable grid">
      <div class="two wide column">
        <img class="ui small bordered image" src="https://s9.postimg.cc/xkxqxrl5r/IMG_20170921_175941.jpg">
      </div>
      <div class="six wide column">
        <form name="UserForm" class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
      </div>
      <div class="one wide column"></div>
      <div class="six wide column">
        <div class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
        </div>
      </div>
    </div>
    <button class="ui primary button">
     edit
    </button>
    </div>
    </div>
    </div>

    <div class="ui container">
      <div class="ui basic clearing segment">
        <p>You've done ? click to save</p>
        <button class="ui right floated primary button"> Save</button>
      </div>
    </div>

The 2 columns