Comment group component: Add Comment Paragraph

<div class="form-group d-flex flex-wrap">
    <div class="m-comment js-comment -border pt-4 pb-3 px-4 -addField d-flex flex-column position-relative w-100">

        <span class="mb-2">

            <p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text" contenteditable></p>
            <div class="popover-content">
                <div class="m-teamSelect js-teamSelect">
                    <i class="m-teamSelect__noresults">No matching results</i>
                    <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk
        </span></li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
        </li>

        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
            <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
        </li>

        </ul>
    </div>
</div>

</span>

<div class="d-flex justify-content-end w-100 mt-3">

    <button type="button" class="btn btn-sm btn-outline-dark -iconRight">

        Plaatsen

    </button>

</div>

</div>
</div>