In-Line 'End Date' with 'to' text.

Agreed, either that or add in labels for each date to establish that the first date is the start date and the second is the end date.

I opened another issue to help figure out what to do with required field markers if we go with the idea presented above instead of re-instating the labels. See #1248786: Fix appearance of marker for required date fields.

I have tried at different times to float the start and end dates next to each other, and when you have select widgets with all those elements it gets ungainly very quickly. Plus I had problems getting the right things to float without running into other css problems (like floating elements that escape their containers in some browsers). So while it seems nice when using small elements (like the popup dates, especially if they don't have any time), it gets ungainly for large ones plus the cross-browser issues begin to get dicey. I'm not sure what is the best answer.

I have the same problem and added following CSS to my theme. I haven't added this to the date_api/date.css because it should be only added to admin / content edit pages but not to the front-end. I have not evaluated if these selectors would have any effect on fronot-end UI, neither if they work with Date Repeat API and Date Repeat Field.

.date-padding,
.date-padding div,
.date-padding label {
  padding:0px !important;
}
.date-no-float {
  clear:none;
  float:left;
  width:auto;
}

.end-date-wrapper .form-item label {
  float: left;
  padding-right: 20px;
  padding-top: 0px;
}

The parts are arranged a bit different than suggested by arlinsandbulte but if it is not ok it should be easy to change.

It is responsive too and nicely wraps on smaller screens and mobiles:

I had a UX improvement request to make this inline, felt like this was an appropriate ticket to attach it to (even though it's only semi-related).

I know this is an old issue, but if people ever come back and try and do this, this solution is a slight improvement on the css in #4.

I added a hook in a custom module as follows:

/**
 * Implements hook_form_alter().
 */
function YOUR_MODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id === 'YOUR_FORM') {
    // Add the css to help with date range formatting.
    $module = drupal_get_path('module', 'YOUR_MODULE');
    $form['#attached']['css'][] = $module . '/css/date-range.css';
  }
}

And then I added this css to the date-range.css file (adjust the breakpoint as you deem necessary for your setup:

/**
 * Formats the date ranges so they are side by side.
 */

@media (min-width: 992px) {
  .date-padding,
  .date-padding div,
  .date-padding label {
    padding:0 !important;
  }

  .date-no-float {
    clear: both;
    float: left;
    width: auto;
  }

  .date-no-float:last-of-type {
    clear: none;
  }

  .end-date-wrapper .form-item label {
    float: left;
    padding-right: 20px;
    padding-top: 0;
  }
}

#8 works well for me.