コピペでCSS テキストを横並びに＆端まで行ったら改行

HTML

<div class="user-top-info">
    <div class="user-top-de">先生: No.3</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div><div class="user-top-de">講師歴: 8年と7日</div></div>

CSS

.user-top-info {
    display: flex;
    flex-wrap: wrap; /* 要素が幅を超えた場合に折り返す */
    gap: 10px; /* 要素間の間隔を設定 */
    margin-bottom: 20px; /* 下に適度な余白を追加 */
}

.user-top-de {
    display: inline-block;
    padding: 3px 10px;font-size: 12px; /* 文字サイズを小さくする */
    background-color: #f0f0f0; /* 任意の背景色 */
    border-radius: 5px; /* 角を丸くする */
    margin-bottom: 0px; /* 下に適度な余白を追加 */
    white-space: nowrap; /* テキストが折り返されないようにする */
}

このコードでは、次のことを行います：