<div class="che-input-box">
  <div layout="column">
    <div class="che-input-box-desktop" flex layout="raw" layout-align="start centre">
      <label hide-xs hide-sm flex="20" class="che-input-box-desktop-label"
             ng-if="labelName"><span>{{labelName}}</span></label>
      <div layout="column" class="che-input-box-desktop-value-column" flex>
        <label hide-md hide-lg hide-xl class="che-input-box-desktop-label"
               ng-if="labelName"><span>{{labelName}}</span></label>
        <div class="che-input-area">
          <input name="{{inputName}}"
                 ng-change="onChange({$value: valueModel})"
                 ng-readonly="isReadonly"
                 ng-model="valueModel">
          <span class="che-input-asterisk fa" ng-show="myForm[inputName] && myForm[inputName].$viewValue"
                ng-class="myForm[inputName] && myForm[inputName].$invalid ? 'fa-times' : 'fa-check'"></span>
        </div>
        <!-- display error messages for the form -->
        <div ng-messages="myForm[inputName].$error" id="new-workspace-error-message" ng-transclude></div>
      </div>
    </div>
    <div hide-xs hide-sm flex layout="raw">
      <div flex="20" class="label-description" ng-if="labelDescription">{{labelDescription}}</div>
    </div>
  </div>
</div>
