anchor.diff:    </div>
   </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">Header Image</h1>
     </div>
   
  -  <div class="flex-1">
  +  <div class="lg:flex-1">
       <div class="form-group">
         <%= f.label :header_image, :class => 'control-label' %>
         <% if @user.header_image? %>
  
positive.code: </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">Profile Photo</h1>
    </div>
  
    <div class="w-full md:w-2/5">
      <div class="w-full rounded">
        <%= image_tag @user.avatar_url, alt: "Avatar" %>
      </div>
    </div>
  
    <div class="flex-1">
      <div class="form-group">
        <%= f.label :avatar_image, :class => 'control-label' %>
        <%= f.file_field :avatar_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">Google Analytics</h1>
    </div>
  
    <div class="lg:flex-1">
      <div class="form-group">
        <%= f.label :ga_property_id, :class => 'control-label' %>
        <%= f.text_field :ga_property_id, :class => 'text_field form-control', placeholder: 'e.g. UA-XXXXXXXX-X' %>
  