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

user_17505429 0
Viewed 69

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>

flexbox css html
4 Answers

You could try two things,

give the close button

1:

align-self: top right;

2:

Give the close button

position: absolute

and then position it with the right margin

user_169278950

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>

user_186043480

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;
}
user_182318760

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>
user_193510400
Related