Empty span dissappeared : I have this html:

    <div class="panel panel-info">
            <div class="panel-heading">Person</div>
            <div class="panel-body">
              <div class="data">
                <p class="keys">
                  <label>Name: </label>
                  <label>Family: </label>
                </p>
                <p>
                  <span ng-bind="name"></span>
                  <span ng-bind="family"></span>
                </p>
              </div>
            </div>
          </div>

    .data {
        display: flex;
    }
    .keys, .values {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

For some reason, if my first span is empty, the second one will appear instead. I dont want the empty span to disappear. First time it happens to me!