Aligning column headers

I have used vertical-align: text-bottom; to align my column headers as I wish, and it looks good in the designer:

However in preview mode, 'Full camp' is not being split over two lines as I'd like:

The code I am using is:

/* Realign the age/meal fields. 

    - Centre justify input fields

    - make row and column titles transparent

    - Force row font and width

    - Force column widths */

#input_82_0_0, #input_82_0_1, 

#input_82_0_2, #input_82_0_3, 

#input_82_0_4, #input_82_0_5, 

#input_82_0_6,

#input_82_1_0, #input_82_1_1, 

#input_82_1_2, #input_82_1_3, 

#input_82_1_4, #input_82_1_5, 

#input_82_1_6,

#input_82_2_0, #input_82_2_1, 

#input_82_2_2, #input_82_2_3, 

#input_82_2_4, #input_82_2_5, 

#input_82_2_6, 

#input_82_3_0, #input_82_3_1, 

#input_82_3_2, #input_82_3_3, 

#input_82_3_4, #input_82_3_5, 

#input_82_3_6 {

    text-align : center;

    vertical-align: text-bottom;

}

 

.form-matrix-row-headers {

  font-family: "Verdana", sans-serif !important;

  font-size: 1em;

  width: 100px; text-align: right !important;

  font-weight: bold; 

  background-color: transparent!important;

  border: none;}

  

.form-matrix-column-headers {

  max-width: 30px;

  width: 30px !important;

  vertical-align: text-bottom; !important

  white-space: pre-line;

  font-size: 0.85em;

  background-color: transparent!important;

  border: none;}

 

.form-matrix-values {

  border: none;

  background: transparent;}

  

#id_82{

  left:-90px!important;

  margin-top: 0px;}

And ideas gratefully received.

Thanks,

David

Please add the following CSS code to resolve the issue:

th.form-matrix-column-headers.form-matrix-column_0 {

    white-space: normal;

}

Thanks - can you explain what this is doing?
________________________________
...

The CSS code I provided will wrap the header text.

You can check it here - https://form.jotform.com/90430835368965 

I am not sure if you tried to provide us some screenshot. If you did, it is not shown here on the forum. Files that are attached inside of an email will not be shown here on the forum. You need to open this thread an upload it. 

How to Post Screenshots to Our Support Forum

I have tried white-space: normal, as well as pre-line and pre-wrap, but whenever I also have vertical-align: text-bottom, the white-space does nothing - as shown below:

Any ideas?

Thanks

Actually, just solved it - I need to use vertical-align:bottom.

Thanks