css arrow with a responsive height to fill responsive container

[shortcutt]

So I’m designing/coding an infographic for a web site with a responsive layout, and I’m still a little new with html/css. I used a responsive table to structure the information, and in the right-hand column I need there to be an arrow that aligns with bits of information in the left-hand column. I know how to code the arrow top and arrow bottom, but I need a nice stretchy middle that will fill the height of the article as it changes, keeping the top of the arrow aligned with the top row, and the bottom part of the arrow aligned with the bottom row.

Is there a solution for this that I’m missing?? For some reason putting “height:100%;” in the CSS for the middle bit of the arrow isn’t working.

Thanks!!

[Paulie_D]

Do you have an image of what you are trying to achieve?

[shortcutt]

Your text to link here…

Yes, thanks. I put black border around each of the ‘s so it’s more clear. So basically, it’s a list of Google’s robots . On the left you can see the blurbs with each robot and the description of each. On the right, you can see where it says “Tolerable” and then the numbers in that column lining up with each blurb. I want to put a flexible, verticle arrow in this column placed underneath the numbers. Does this make sense? The scale goes from “Tolerable” to “Terrifying” rating each robot from least to most scary. It’s important to have the table just so when the screen’s resized everything’s still neatly aligned.

[Paulie_D]

Ok…now can you make a Codepen of what you have already?

HTML & CSS.

[shortcutt]

Here it is on Codepen

[Author]

Posts