How to make text vertical orientation besides an image?-CodePudding

I am trying to make text besides image look like this: https://i.stack.imgur.com/yorkX.png

I've tried using rotate, translateX, and translateY. This is what I've done:

.blue {
  margin-top: 50px;
  margin-left: 10px;
  background-color: darkslateblue;
  width: 200px;
  height: 200px;
}

p {
  transform: rotate(90deg) translateX(40px) translateY(28px);
}

<div>
  <div ></div>
  <p>Blue</p>
</div>

The problem with my code is whenever I change the margin of blue box, the text stays at the same position like this:https://i.stack.imgur.com/leEQm.png

I'm wondering, is there another way that if I change the margin of blue box so that the text will follow the blue-box?

Thank you in advance

CodePudding user response：

p {
    transform: rotate(90deg) translateX(-120px) translateY(-102px);
    display: block;
    right: -30px;
    position: relative;
}
.blue {
  margin-top: 50px;
  margin-left: 10px;
  background-color: darkslateblue;
  width: 200px;
  height: 200px;
}
.Box-out {
    width: max-content;
}

<div >
  <div ></div>
  <p>Blue</p>
</div>

CodePudding user response：

Don't use a lot of hacky values that are not easy to maintain. Try the below:

.blue {
  margin-left: 10px;
  background-color: darkslateblue;
  width: 200px;
  height: 200px;
}

p {
  position: absolute;
  top: 5px;
  left: 100%;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  margin: 0;
}

.container {
  display: inline-block;
  position: relative;
  margin-top: 50px;
}

<div >
  <div ></div>
  <p>Blue</p>
</div>