Weird corner case

used-service-box.hbs

<div class="panel">
    <div class='panel-summary' {{action 'toggleExpanded'}}>
        <div class='row'>
            <div class='span-10'>
                {{usedService.service.name}}
                <div class='subtle'>
                    {{usedService.service.desc}}
                    | <a href='#' {{bind-attr href="service.siteLink"}}>Visit</a>
                </div>
            </div>
            <div class='span-2'>
                {{as-currency usedService.cost}}
                <div class='subtle'>{{humanize-yearly usedService.billingsPerYear}}</div>
            </div>
        </div>
    </div>
    {{#if isExpanded}}
    <div class="panel-body">
        <div class='row'>
            <div class='span-5'>
                <label for="cost">Cost</label>
                {{input value=usedService.cost}}
                <button {{action 'save'}}  {{bind-attr disabled=isNotDirty}}>Save</button>
            </div>
            <div class='span-5'>
                <label for="billingsPerYear">Yearly Billing Periods</label>
                {{input value=usedService.billingsPerYear}}
            </div>
            <div class='span-2'>
                <button {{action 'delete'}}>Delete</button>
            </div>
        </div>
    </div>
    {{/if}}
</div>