How can arrange custom fields so they are side by side?
The case custom fields are formatted as a series of one row tables.  You could add some jQuery to move them around.

For example:

CRM.$(function($) {
  $('#Outcomes table:nth-of-type(3n+1)').each(function (index) {
    // Combine 3 rows into 1      
    for (var i = 0; i &lt;= 1; i++) {
      $(this).find('td:last').after($(this).next().find('td'));
      $(this).next().remove();
    }
    // Merge tables
    if (index &gt; 0) {
      $(this).prev().find('tr:last').after($(this).find('tr'));
      $(this).remove();
    }
  });
  // Remove labels if not wanted
  $('#Outcomes td.label').remove();
});


You can add it to your page in various ways, but I'd create a tiny extension and drop it in there.  See also wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference 

Without jQuery: 



With jQuery: