How can I move the 'X' button to the end of the right side(inline with the left side of te-CodePudding

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 >
  <div >
    <div >!</div>
  </div>

  <div >
    <div >Are you sure you want to do that?</div>
    <div >✖</div>
    <div >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 >Continue</button>
    <button >Cancel</button>
  </div> 

</div>

CodePudding user response：

You could try two things,

give the close button

align-self: top right;

Give the close button

position: absolute

and then position it with the right margin

CodePudding user response：

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 >
      <div >
        <div >!</div>
      </div>
      
      <div >
        <div >
        <div >Are you sure you want to do that?</div>
        <div >✖</div>
        </div>
          <div >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 >Continue</button>
        <button >Cancel</button>
      </div> 
      
    </div>

CodePudding user response：

You can add a float option to the current close-button element:

.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;
  float:right;
}

CodePudding user response：

You need to try this, i think it's the best solution for your case

 <style>
    .modal {
      background: white;
      width: 480px;
      border-radius: 10px;
      box-shadow: 2px 4px 16px rgba(0,0,0,.2);
      display: inline-flex;
      padding: 8px 8px;
      position: relative;
    }
    .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;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    </style>