anchor.diff:  </div>
   
   
  -<div class="flex border-b border-gray-300 pt-4 mb-4">
  -  <div class="md:w-1/5">
  +<div class="flex flex-col lg:flex-row border-b border-gray-300 pt-4 mb-4">
  +  <div class="w-full lg:w-1/5 pb-2">
       <h1 class="text-xl text-gray-600">Profile Photo</h1>
     </div>
   
  -  <div class="w-full md:w-2/5">
  +  <div class="w-full lg:w-2/5 pb-2">
       <div class="w-full rounded">
         <%= image_tag @user.avatar_url, alt: "Avatar" %>
       </div>
     </div>
   
  -  <div class="flex-1">
  +  <div class="lg:flex-1">
       <div class="form-group">
         <%= f.label :avatar_image, :class => 'control-label' %>
         <%= f.file_field :avatar_image %>
  
positive.code:   </div>
  </div>
  
  <div class="flex border-b border-gray-300 pt-4 mb-4">
    <div class="md:w-1/5">
      <h1 class="text-xl text-gray-600">Header Image</h1>
    </div>
  
    <div class="flex-1">
      <div class="form-group">
        <%= f.label :header_image, :class => 'control-label' %>
        <% if @user.header_image? %>
  
negative.code:   </div>
  </div>
  
  <div class="flex flex-col lg:flex-row border-b border-gray-300 pt-4 mb-4">
    <div class="w-full lg:w-1/5 pb-2">
      <h1 class="text-xl text-gray-600">Social Networks</h1>
    </div>
  
    <div class="form-horizontal lg:flex-1">
      <div class="form-group">
        <%= f.label :github_handle, :class => 'control-label' do %>
          <%= icon('fab', 'github-square fa-fw h-5 w-5 inline-block mr-4', 'GitHub') %>
  