How to compute relative and absolute values?


Is it possible to compute a css value ?

My need is precisely to vertical-align the left border of 2 lines that begin with a padding, one of it having an image that must be into this padding :

On this image, the padding is at the left of the orange arrow, it’s in ems, to be preserved in case of resizing the text. The second line must be aligned like on the image, how to compute the padding of those lines ?
In my opinion it should be something like this :

.firstLine {padding-left: (1em;}
.secondLine {padding-left: (1em + 16px);}

This way, if the text is resized, the 2 lines should still be aligned but unfortunately, it doesn’t work…

Do you have a solution ?

Yes, obviously.

The problem is that I simplified my need. Each of my lines already have images and I have a kind of incrementation on my lines. Here is a new image with the “real situation” :

As you can see here, in fact all my lines begin with an image (a flag, a big dot or a “document-icon”) that is in the left padding of the text.
The arrows can be “none”, “up”, “up/down” or “down”, they are links.

My idea was that the padding of the cells was on the left of the arrows, but when I have no arrow… I must compute a padding in em (the original padding) and the lack of width of my arrows (in pixels)…

You can avoid this whole problem by making the arrow image a background image. Then you have the same padding on both lines, and set a background position for the arrow so that it will stay in place (e.g. right center).

Does that make sense?