styles.css

.body{
    background-color: ivory;
}

.chat-bubble{
    background-color: lightgreen;
    border: 2px solid darkgreen;
    width: 40%;
    min-height: 50px;
    clear: both;
    /* position: relative; */
    border-radius: 50px;
    text-align: center;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
}

.chat-name{
    font-size: 24px;
    background-color: White;
    border: solid black 2px;
    font-weight: bold;
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 6px;
    padding-right: 6px;
    /* position: absolute;  */
    /* top: 0%;
    left: 0%; 
    padding-bottom: 16px;*/
    /* top: -10%; */
}

/* .chat-name::before{
    content:'\f406';
    font-family: "FontAwesome"
} */

/* .edit-button {
    
    font-family: "FontAwesome";
} */
/* .chat-bubble::after {
    content: '';
	position: absolute;
	right: -50px;
    top: 0%;
	border: 30px solid;
	border-left-color:darkgreen;
    background-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
} */
/* 
.chat-bubble:nth-child(2n){
    float: right;
    /* text-align: left; */
/* } */

.chat-name:nth-child(2n){
    float: left;
    text-align: right;
 } 

.text-field{
    clear: both;
    position: sticky;
    bottom: 0%;

}

h1{
    position: absolute;
    top: 0;
    font-size: 40px;
    width: 100%;
}
 
p{
    width: 100%;
    font-size: 16px;
}

section{
    width: 100vw;
    border: solid 1pt black
}

.profile{
    display: flex;
    justify-content: top;
    align-content: space-between;
}

.fa-user{
    font-family: "FontAwesome";
    font-size: 48pt;
}

#wrapper{
    display: flex;
    flex-direction: column;
}

button{
    align-self: top;
    max-height: 35px;
}
/*  The new tag structure -- 
<section class="chat-bubble" id="${id}"> 
    <div class="profile"> 
        <i class="fas fa-user"></i>
        <h3 class="chat-name" id="${id}chn">
            ${name} 
        </h3> 
        <button class="edit-button" id="${id}edt"><i class="far fa-edit"></i></button> 
        <button class="delete-button" id="${id}del">X</button> 
    </div> 
    <p id="${id}msg">${message}</p> 
</section>

So...
Profile is flex-row
chat-bubble is flex-column

*/