Table Form Columns

Dear everyone,

I’m developing a module that builds a table form with different columns. Now if you take a look at the attached screen cap below, you can find that I’m having a trouble in fitting the text inside the 2nd column.

Scree Cap

As you can see I’m having this empty space in the right column, right beside the text “LPG Sweetning Unit (LSU)”. I want to fit the text in one line, but I’ve tried many things but nothing worked.

Here is the module code (only the parts that I think they matter):

<?php

function user_upgrades_theme() {
    return array(
      'user_upgrades_form_table' => array(
      'render element' => 'form',
    ),
  );
}

/**
 * Page Callback / Form Builder for the table form.
 */

function user_upgrades_form_table_form($form = array(), &$form_state) {

$rows = array();

  $form['table'] = array(
    '#theme' => 'user_upgrades_form_table',
    '#header' => array(t('Picture'), t('Unit Name'), t('Unit Cost ($)'), t('Add Unit')),
    '#prefix' => '<div id="table" class="header">',
    '#suffix' => '</div>',

'rows' => array(
        '#tree' => TRUE,

	'r1' => array(
   		
        'c1' => array(
        '#type' => 'markup',
        '#title' => t('Picture'),
        '#prefix' => '<div id="c1" class="unit_picture_column">',
        '#suffix' => '</div>',
        '#markup' => '<img src="http://localhost/drupal/sites/all/modules/user_upgrades/images/lsu_colored.jpg" alt="lsu_colored" style="width:100px;height:75px;">',
             ),

        'c2' => array(
         	 '#type' => 'markup',
            '#title' => t('Unit Name'),
            '#prefix' => '<div id="c2" class="unit_name_column">',
            '#suffix' => '</div>',
            '#markup' => '<p id="hover_lsu">LPG Sweetning Unit (LSU)</p>',
             ),
        
       'c4' => array(
          '#type' => 'markup',
          '#title' => t('Unit Cost'),
          '#prefix' => '<div id="c4" class="unit_cost_column">',
          '#suffix' => '</div>',
          '#markup' => '40 million',
           ),

      'c5' => array(
          '#type' => 'submit',
          '#value' => t('Add'),
          '#prefix' => '<div id="c5" class="form-button">',
          '#suffix' => '</div>',
          '#attributes' => array('onclick' => 'qj_buy_lsu()'),
             ),
            ),
           ),
          );
       return $form;
       }

function theme_user_upgrades_form_table(&$variables) {

  $form = $variables['form'];
  $rows = $form['rows'];
  $header = $form['#header'];

  $content = array(
    '#theme' => 'table',
    '#header' => $header,
    '#rows' => array(),
  );

  foreach (element_children($rows) as $row_index) {
        $row = array();
        foreach (element_children($rows[$row_index]) as $col_index) {
        $row[] = drupal_render($rows[$row_index][$col_index]);
         }
        $content['#rows'][] = $row;
        }

  return drupal_render($content);
}

I’ve searched a lot online, but apparently no one addressed the same issue I have here. I’ve even tried to mess with the style.css file of the Baritk theme, but that didn’t manage to remove that space ! Can anyone help me please ?

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/4/feed