Adjusting the width to have all values display in one line

oristeph

I am working on customizing my datatables in order to have all values in a column display in one row. At the moment I have 3 columns that I am displaying 2 values from an array and html to have something appear like a bar graph inside of the column. I am having an issue with having the html display under the text when I would like them all be sitting in line to one another. I've attempted to adjust the width of my first column in order to give the rest of the columns more room to work with but this did not have any affect on the row.

i've also attempted put all items in a span tag in order to get the look I was attempting to but was not able to.

Here is a code snippet of adjusting the width to the first colum:

columnDefs: [ { "width": "15%", "targets": [0] } ],

Here is a jsfiddle to my datatable.