Rendering two components (with a Handlebars helper?)

Design
1

Edit: moved this to a StackOverflow question, as it’s more of a practical question.

I have a {{#resizable-column}} block component whose width is controlled by a {{drag-handle}} component. In terms of markup, they are siblings, and rely on the width of their parent (displayed with flexbox).

I’d like to reduce this down to a single component that includes the column and the drag handle, ideally without any redundant markup, or any extra styles:

{{#resizable-column width=navWidth}}
  My content
{{/resizable-column}}

resulting in:

<div class="resizable-column" style="width: `navWidth`">
  My content
</div>
<div class="drag-handle" style="right: `navWidth`"></div>

This is what I had in mind:

<script type="text/x-handlebars" id="components/resizable-column">
  {{#the-column width=width}}
    {{yield}}
  {{/the-column}}

  {{drag-handle positionRight=width}}
</script>

but given that components and views wrap their content, this results in an additional div. Could/should this be done with a Handlebars helper?