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>

1

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

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

You could move that button with close-button class inside the div with header class, and change display:inline-flex to display:flexlike below.

display:flex instead of display: inline-flex because inline-flex would take the smallest width it can take, so you wouldn’t get what you are looking for.

@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, 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: 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">
      <div>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>

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>

You need to add float:right; to close-button element. I think it’s the best solution for your case.

Not the answer you’re looking for? Browse other questions tagged html css flexbox or ask your own question.