如何将文本放在输入字段的下方？

<label for="inputField">文本描述：</label>
<input type="text" id="inputField" name="inputField">

<style>
    .input-container {
        position: relative;
    }
    .input-container input {
        padding-bottom: 20px;
    }
    .input-container input::placeholder::after {
        content: "文本描述";
        position: absolute;
        bottom: 0;
        left: 0;
        color: #999;
        font-size: 12px;
    }
</style>
<div class="input-container">
    <input type="text" placeholder="">
</div>

<style>
    .input-container {
        position: relative;
    }
    .input-container input {
        padding-bottom: 20px;
    }
    .input-container .text {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #999;
        font-size: 12px;
    }
</style>
<div class="input-container">
    <input type="text">
    <div class="text">文本描述</div>
</div>
<script>
    var input = document.querySelector('.input-container input');
    var text = document.querySelector('.input-container .text');
    input.addEventListener('focus', function() {
        text.style.display = 'none';
    });
    input.addEventListener('blur', function() {
        if (input.value === '') {
            text.style.display = 'block';
        }
    });
</script>