Custom CSS not applied after component re-rendering

Question

I have a lightning component representing a search result that only renders its contents if it matches a given search string (utilizing aura:if). On the initial rendering of the component, its associated CSS appears to be working correctly, but upon subsequent renderings the CSS no longer appears to be working. The two images below show the difference:

First rendering:

Subsequent rendering(s):

This is the component that represents a single search result:

<aura:component extends="c:SearchableSObject">
<aura:attribute name="accountName" type="String"/>
<aura:attribute name="accountNumber" type="String"/>
<aura:attribute name="billingStreet" type="String"/>
<aura:attribute name="billingCity" type="String"/>
<aura:attribute name="billingState" type="String"/>
<aura:attribute name="billingPostalCode" type="String"/>
<aura:attribute name="billingCountry" type="String"/>    
<aura:attribute name="dba" type="String"/>
<aura:attribute name="salesforceId" type="String"/>
<aura:attribute name="searchableData" type="String"/>
<aura:registerEvent name="filterPatientsApplicationEvent" type="c:FilterPatients"/>
    <div class="radioolumn">
        <label class="slds-radio">   
            <ui:inputRadio aura:id="radios" label="" name="SearchableSObjectSelect" click="{!c.selectAccount}" value="{!v.selected}"/>
            <span class="slds-radio--faux"></span>
        </label>    
    </div>
    <div class="content-column">
        <div class="custom-card">
            <div class="left-column">
                <h3 class="slds-text-heading--medium">{!v.accountName}</h3>   
                <br/>
                <h3 class="slds-text-heading--small">Account Number</h3>
                <div>{!v.accountNumber}</div>
            </div>

            <div class="middle-column">
                <br/>
                <br/>
                <h3 class="slds-text-heading--small">Address</h3>
                <div class="slds-text-body--regular">{!v.billingStreet}</div>
                <div class="slds-text-body--regular">{!v.billingCity + ', ' + v.billingState}</div>
                <div class="slds-text-body--regular">{!v.billingPostalCode}</div>
            </div>

            <div class="right-column">
                <br/>
                <br/>
                <h3 class="slds-text-heading--small">DBA</h3>
                <div class="slds-text-body--regular">{!v.dba}</div>
            </div>
        </div>    
    </div>


</aura:component>

Here is the style of the above component:

.THIS .custom-card{
    padding: 25px !important;
    height: 150px;
    width: 750px;
    border-radius: 5px;
    border: 1px solid #dadee5;
}

.THIS .left-column{
    float: left;
    width: 33%;
}

.THIS .middle-column{;
    float: left;
    width: 33%;
}

.THIS .radio-column{
    float: left;
    padding: 75px;
    width: 50px;
}

.THIS .content-column{
    float: left;
    width: 100px;
}

This is the component that it extends (SearchableSObject), which performs the rerendering with aura:if. It does not have a CSS document. :

<aura:component extensible="true">
    <aura:attribute name="name" type="String" default=""/>
    <aura:attribute name="matchesSearch" type="Boolean" default="true"/>
    <aura:attribute name="searchableData" type="String" default=""/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <aura:attribute name="sobjectType" type="String" default=""/>
    <aura:handler event="c:UpdateSearchResults" action="{!c.matchSearchText}" includeFacets="true"/> 
     <aura:handler event="c:ClearSObjectSelection" action="{!c.clearSelection}"/>
    <aura:if isTrue="{!v.matchesSearch}">   
        <tr>{!v.body}</tr>
    </aura:if>
</aura:component>

<aura:component extensible="true">
    <aura:attribute name="name" type="String" default=""/>
    <aura:attribute name="matchesSearch" type="Boolean" default="true"/>
    <aura:attribute name="searchableData" type="String" default=""/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <aura:attribute name="sobjectType" type="String" default=""/>
    <aura:handler event="c:UpdateSearchResults" action="{!c.matchSearchText}" includeFacets="true"/> 
     <aura:handler event="c:ClearSObjectSelection" action="{!c.clearSelection}"/>
    <aura:if isTrue="{!v.matchesSearch}">   
        <tr>{!v.body}</tr>
    </aura:if>
</aura:component>

Is it possible that this issue could somehow be resolved using the components' renderer? Any information on how to begin troubleshooting this issue would be useful.

Answer 1

Surrounding the <aura:if></aura:if> element in a <span></span> element resolved the issue, as mentioned in the comment by D.S. . The CSS appears normally on all subsequent renderings.