How can I move the 'X' button to the end of the right side(inline with the left side of text)?

Question

I am trying to get my head around CSS and practiced what I had learned. I go back and forth on the notes, googling here and there, tried the solution provided in the module but still it didn't go as the expected solution. I've been trying to move the 'x' button to the right as in the following picture. Below are the html and css code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html, body {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  /* I'll give you this one for free lol */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0,0,0,.2);
  display: inline-flex;
  padding: 8px 8px;
}

.left-side, .right-side {
  margin: 8px;
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}

<div class="modal">
  <div class="left-side">
    <div class="icon">!</div>
  </div>

  <div class="right-side">
    <div class="header">Are you sure you want to do that?</div>
    <div class="close-button">✖</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
    <button class="continue">Continue</button>
    <button class="cancel">Cancel</button>
  </div> 

</div>

Answer 1

check this you can simply use display:flex; and justify-content:space-between;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html, body {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  /* I'll give you this one for free lol */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0,0,0,.2);
  display: inline-flex;
  padding: 8px 8px;
}

.left-side, .right-side {
  margin: 8px;
}

.right-header{
  display:flex;
  justify-content:space-between;
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}

 <div class="modal">
      <div class="left-side">
        <div class="icon">!</div>
      </div>
      
      <div class="right-side">
        <div class="right-header">
        <div class="header">Are you sure you want to do that?</div>
        <div class="close-button">✖</div>
        </div>
          <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
        <button class="continue">Continue</button>
        <button class="cancel">Cancel</button>
      </div> 
      
    </div>