Question

Can I somehow use CSS to place the block2 in top right corner of block1?

---

Context :

• block2 must be the (very) last inside HTML code of block1 or it could be placed after block1. I can’t make it the first element in block1.
• Within block1 there could be <p>, images, text and it is beyond my control to know what and how many.
• Also I need the block2 to flow.

---

Code :

.block1 {
    color: red;
    width: 100px;
    border: 1px solid green;
}

.block2 {
    color: blue;
    width: 70px;
    border: 2px solid black;
    position: relative;
}

<div class='block1'>
    <p>text</p>
    <p>text2</p>
    <div class='block2'>block2</div>
</div>

Answer 1

.block1 {
    color: red;
    width: 100px;
    border: 1px solid green;
    position: relative;
}

.block2 {
    color: blue;
    width: 70px;
    border: 2px solid black;
    position: absolute;
    top: 0px;
    right: 0px;
}

<div class='block1'>
  <p>text</p>
  <p>text2</p>
  <div class='block2'>block2</div>
</div>

Should do it. Assuming you don’t need it to flow.