Aligning misaligned validation message to component when the component line-wraps elements

Say your jQuery control emits table tags, and as some of you may already know, table always forced an implicit line-wrap (or line-break), so if you want to keep the table and another element on same line, the work-around is to put the table-emitting component inside td tag and the other elements(e.g. unobtrusive validation) on another td tags

An example with misaligned validation message:

To amend that, we could do this:

<div class="editor-label">
  @Html.LabelFor(model => model.CountryId)
 </div>
 <div class="editor-field" >                                                
  
  <table>
  <td>
  @Html.AjaxComboBoxFor(x => x.CountryId, null, "/Home/CountryLookup", "/Home/CountryCaption")
  </td>
  <td>
  @Html.ValidationMessageFor(x => x.CountryId) 
  </td>
  </table>
 
 
</div> 

Using that, the unobtrusive validation message's alignment will be rendered properly

But that approach will eventually violate DRY principle, so we need to amend our approach. We will use templated razor delegate

@{
    Func<dynamic, object> align =
        @<table>
            <tr>
            @foreach (var s in item)
            {
                <td>@s</td>
            }
            </tr>
            </table>;
}

To use:

<div class="editor-label">
 @Html.LabelFor(model => model.CountryId)
</div>
<div class="editor-field" >                                                            
 @align( new[]{ 
   Html.AjaxComboBoxFor(x => x.CountryId, null, "/Home/CountryLookup", "/Home/CountryCaption"),
   Html.ValidationMessageFor(x => x.CountryId) 
   })                    
</div>