<div class="container">
  
<div class="user">
  <div class="user__img">
    
  </div>
  <div class="user__description">
    <h2 class="user__name">Suneo</h2>
    <button class="user__cta">Send Message</button>
  </div>
</div>

<div class="result hidden">
    
</div>
</div>

.container {
  display:flex;
  gap:2rem;
  align-items: flex-start
}

.user {
  display:flex;
  flex-direction:column;
  justify-content: center;
  border: 2px solid;
  border-color: #43a4ee;
  width: min-content;
  border-radius: 30px;
  overflow:hidden;
  
  &__img {
    height:15rem;
    width:15rem;
    background-size:cover;
    border: 2px solid #43a4ee;
    background-image:url('https://wallpapercave.com/wp/wp6994571.jpg')
  }
  
  &__description{
    padding:2rem;
    display:flex;
    flex-direction: column;
    align-items:center;
  }
  
  &__name{
    white-space: nowrap;
    margin: 0;
    padding-bottom: 1rem;
  }
  
}

.result{
  text-align: center;
  width: 15rem;
  border: 2px solid #43a4ee;
  display:flex;
  flex-direction: column;
  gap:1rem;
  align-items:center;
  width:min-content;
  border: 2px solid;
  border-color: #43a4ee;
  border-radius: 30px;
  padding:1rem;
  
  table {
  width: 50%;
  border-collapse: collapse;
  margin: 20px auto;
  text-align: center;

  th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }

  th {
    background-color: lightgray;
  }
}

}

.message {
  display:flex;
  flex-direction: column;
  gap:1rem;
  align-items:center;
  width:min-content;
  border: 2px solid;
  border-color: #43a4ee;
  border-radius: 30px;
  padding:1rem;
  
}

.hidden {
  display:none;
}

const user = document.querySelector('.user');
const cta = document.querySelector('.user__cta');
const result = document.querySelector('.result');

user.addEventListener('click',() => {
   result.classList.remove('hidden');
  result.innerHTML = `
  <em>"The most important thing in this world right now is money, followed by brains and inspiration."</em>
    <table>
  <tr>
    <th>Attribute</th>
    <th>Details</th>
  </tr>
  <tr>
    <td>Gender</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Birthdate</td>
    <td>February 29 (Pisces)</td>
  </tr>
  <tr>
    <td>Residence</td>
    <td>Honekawas' Residence</td>
  </tr>
</table>
  `;
})

cta.addEventListener('click',(e) => {
   result.classList.remove('hidden');
  result.innerHTML= `
  <h2>Hey, I'm Suneo Honekawa</h2>
    <textarea rows="10"></textarea>
    <button>Send</button>
  `;
  e.stopPropagation();
})

result.addEventListener('click',() => {
  result.classList.add('hidden')
})