How to move elements using CSS-CodePudding

I want to move the blue icon with the question mark to the bottom of the box right above the paragraph while also moving the gray icon to the top right of the paragraph without messing up my text.

I tried making multiple flex containers but nothing seems to be working.

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

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

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: 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;
}


/* SOLUTION: */

.modal {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-direction: column;
}

.icon {
  /* this keeps the icon from getting smashed by the text */
  display: flex;
  flex-shrink: 0;
}

.ic {
  display: flex;
  align-items: flex-sart;
}

.header {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.text {
  margin-bottom: 16px;
}

<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>
  <div >
    <button >Continue</button>
    <button >Cancel</button>
  </div>
</div>

CodePudding user response：

in css add this :

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7px;
  margin-left:5px;
}
.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;
  margin-right: 5px;
}

in html

<div >
    <div >
      <div >!</div>
      <div >Are you sure you want to do that?
      </div>
      <div >✖</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>
    <div >
      <button >Continue</button>
      <button >Cancel</button>
    </div>
  </div>
  <link rel="stylesheet" href="style.css">

CodePudding user response：

put the element in the container that you want it to show up in its corner or edge. then make the parent container position: relative; and your element position: absolute; then control their position using top, right, left, and bottom. here is the 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;
  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);
  position: relative;
}

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

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  cursor: pointer;
}

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


/* SOLUTION: */

.modal {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-direction: column;
}

.icon {
  /* this keeps the icon from getting smashed by the text */
  display: flex;
  flex-shrink: 0;
}

.ic {
  display: flex;
  align-items: flex-sart;
}

.header {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.text {
  margin-bottom: 16px;
}

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