anchor.diff:              units[relation['id']] = relation.attributes['name'];
             }
           });
  -        var recipe_ingredients = '<table>';
  +
  +        var recipe_ingredients = "";
           data.data.forEach(function(recipe_ingredient) {
  -          recipe_ingredients += '<tr>' +
  -                                  '<td>' + ingredients[recipe_ingredient.relationships.ingredient.data['id']] + '</td>' +
  -                                  '<td>' + recipe_ingredient.attributes['quantity'] + '</td>' +
  -                                  '<td>' + units[recipe_ingredient.attributes['unit-id']]  + '</td>' +
  -                                '</tr>';
  +          var units_name = recipe_ingredient.attributes['unit-id'] == null ? '' : units[recipe_ingredient.attributes['unit-id']];
  +          recipe_ingredients += "<div class='row'>" +
  +                                  "<div class='col-sm-2'>" + ingredients[recipe_ingredient.relationships.ingredient.data['id']] + '</div>' +
  +                                  "<div class='col-sm-1'>" + recipe_ingredient.attributes['quantity'] + ' ' + units_name + '</div>' +
  +                                '</div>';
           });
  -        recipe_ingredients += '</table>';
           $('#ingredients').html(recipe_ingredients);
         });
         $(this).attr('show-detail', 0);
  
positive.code: <h1>
    <%= @recipe.name %> <%= link_to image_tag('edit-icon.png', size:'16', title: 'Edit recipe'), edit_recipe_path(@recipe) if @recipe.author == current_user %>
    <%= link_to image_tag('delete-icon.png', size:'16', title: 'Delete recipe'), recipe_path(@recipe), method: :delete, data: {confirm: 'Are you sure!'} if policy(@recipe).destroy? %>
  
negative.code:   <a class='steps' data-id='<%=@recipe.id%>' href='https://www.w3schools.com'>Steps</a>
    (<%= @recipe.recipe_steps.length %>)
  </p>
  </div>
  
  <script type='text/javascript' charset='utf-8'>
  $(function () {
  