Struggling with flexbox a bit [not FCC task]

[diomed]

I’m trying to put light blue square on left side of the card.
but whatever I tried it doesnt seem to do it for me.

So I’m requiring a bit of assistance here:

blue card demo

[bbsmooth]

I’m not sure flexbox is the best approach here. Not saying it can’t be done with flexbox, but it is definitely not necessary to do it. I initially tried it with flexbox, but I couldn’t get the text rotation to work properly with it.

I made some guesses about what you were trying to do and created a quick codepen using absolute positioning instead. It may not be exactly what you want, but perhaps it will give you some ideas about how to do this.

[lasjorg]

Here is another one just for fun using Flexbox (using the HTML from the above post).

The problem is, the rotation makes the text super blurry in Chrome, and none of the “fixes” I tried worked. Doesn’t look all that amazing in Firefox either but at least it isn’t blurry.

.card {
  display: flex;
  column-gap: 1rem;
  max-width: 400px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.card a {
  display: block;
  writing-mode: tb;
  text-align: right;
  rotate: 180deg;
  font-size: 1rem;
  padding: 1rem;
  background-color: #dadada;
  text-decoration: none;
}

.content {
  order: 2;
}