<div class="pullLeft" style="display: flex; width: 320px;">
    <div class="pullLeft area-box">

        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{localize data.system.house}}" data-dtype="String" autofocus required />
            {{else}}
                <select class="sheet-infoValues editable" name="system.house" data-type="{{config.sheettype.demon}}" data-name="data.system.house" data-dtype="String">
                    {{selectOptions listData.HouseList selected=data.system.house localize=false}}
                </select>
            {{/if}}
            <span class="floating-label">{{localize 'wod.bio.demon.house'}}</span>
        </div>

        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{localize data.system.faction}}" data-dtype="String" autofocus required />
            {{else}}
                <select class="sheet-infoValues editable" name="system.faction" data-type="{{config.sheettype.demon}}" data-name="data.system.faction" data-dtype="String">
                    {{selectOptions listData.FactionList selected=data.system.faction localize=false}}
                </select>
            {{/if}}
            <span class="floating-label">{{localize 'wod.bio.demon.faction'}}</span>
        </div>

        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{data.system.visage}}" autocomplete="off" autofocus required />
            {{else}}
                <input class="sheet-infoValues editable" name="system.visage" type="text" value="{{data.system.visage}}" data-name="data.system.visage" data-dtype="String" autocomplete="off" autofocus required />
            {{/if}}
            <span class="floating-label">{{localize 'wod.bio.demon.visage'}}</span>
        </div>
    </div>
</div>