Using the Pl/Sql Dynamic Content Region to Create a Kanban Board

The image linked below is a snippet of my first attempt at creating a Kanban Board inside of Oracle APEX. The majority of the code I found online with a few edits I made to work with my application a bit better. It's essentially a PL/SQL Dynamic Content region with some CSS Inline code to make it look nicer.

Kanban Board Image

I have two issues with it currently that I am seeking help to solve. The first is that the task blocks will overlap with one another if they are dragged and dropped on top of each other. A snippet of what this looks like will be included below.

Overlapped Tasks Image

The second is that I would like the position of the four stages of the board to be a bit more static. Currently, the height, width, and even vertical position of the four containers are dependent on how many tasks the container holds. I'd like it if the widths were fixed and if the tops of each section were flush with each other.

Here is the code I have inside the PL/SQL Dynamic Content Region:

Declare
   Vloop number := 1;
   cursor c_sdlc is
   select '<div class="dropdiv" id="'||sdlcno||'" ondrop="drop_handle(this,event)" 
                  ondragover="drop_over_handle(event)">
                      <h1>' ||sdlcname|| '</h1><br>
                     <div class="dropdiv-new-item-region" style="cursor: default;">
                        <a href="'||apex_util.prepare_url('f?p=&APP_ID.:61:' || :app_session || '::::P61_SDLC:' ||sdlcno|| '-' ||sdlcname)||'">
                           <div class="dropdiv-new-card" style="cursor: pointer;">
                              <i class="fa fa-plus"></i>
                           </div>
                        </a>
              </div>' dropsdlc, sdlcno
   from demo_sdlc
   order by sdlcno;

   cursor c_task (b_sdlcno in number) is
   select '<div id="'||t.id||'" class="dnddiv" draggable="true"
                  ondragstart="drag_handle(event)"> 
                  <div class="card-header">
                     <i class=" '|| t.project_icon||'" style="color:black;background:#F7DA1B;"></i>
                  </div>
                  <div class="card-title">
                     <p>'||t.project_id||'</p>
                  </div>
                  <div class="card-content">
                     <div>
                        <div class="img_lnk">
                            <a href="' || apex_util.prepare_url('f?p=&APP_ID.:61:' || :app_session || '::::P61_SDLC,P61_ID:' || to_number(b_sdlcno) || ',' || to_number(t.id)) || '">
                                 <div style="cursor: pointer;">
                                       <img src="data:image/png;base64, ' || apex_web_service.blob2clobbase64(u.userimage) || '"/>' ||u.username ||' - '||t.task_name|| '
                                 </div>
                            </a>
                       </div>
                    <div>
                       <p>'||t.task_description||'</p>
                    </div>
                 </div>
             </div>
          </div>' dragline
   from demo_task t, demo_users u
   where t.sdlcno = b_sdlcno and t.userid=u.userid;
begin
   sys.htp.print('<table>');
   sys.htp.print('<tr>');
   for r_sdlc in c_sdlc
      loop
      sys.htp.print('<td>');
      sys.htp.print(r_sdlc.dropsdlc);
      for r_task in c_task(r_sdlc.sdlcno)
         loop
         sys.htp.print(r_task.dragline);
      end loop;
      sys.htp.print('</td>');
      if Vloop = 3 then
         Vloop := 1;
         sys.htp.print('</tr>');
      else
         Vloop := Vloop + 1;
      end if;
   end loop;
   sys.htp.print('<tr>');
   sys.htp.print('<table>');
end;

And here is the Inline CSS code used.

.dropdiv {
   border: 2px solid #838383;
   box-shadow: 3px 3px 3px #BDBEBD;
   border-radius: 5px 5px 5px 5px;
   display: block;
   min-height: 300px;
   padding: 16px;
   text-decoration: none;
   margin-right: 10px;
   width: 100%;
}

.dropdiv:hover {
   -webkit-transform: translateY(-6px);
   -ms-transform: translateY(-6px);
   transform: translateY(-6px);
}

.dropdiv h1 {
    font: bold 18px/18px Helvetica, Arial, Sans-serif;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.5);
    margin: 0px;
    text-align: center;
    line-height: 35px;
    border-radius: 20px;
    background-color: #f1f1f1;
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdiv-new-item-region {
    clear: both;
}

.dropdiv-new-card {
    float: left;
    text-align: center;
    margin: 3px 10px 10px 10px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    background: #55c555;
}

.dropdiv-new-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.dropdiv-new-card i {
    font-size: 18px;
    line-height: 28px;
    width: 28px;
    height: 28px;
    color: white;
}

/* CSS code for the div to be dragged */
.dnddiv {
    display: inline-block;
    width: 100%;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44);
    border-radius: 1px;
    color: rgba(0, 0, 0, 0.87);
    transition: all 0.4s ease;
    background: #fafafa;
    position: relative;
    overflow: hidden;
/*    cursor: pointer;*/
    cursor: grab;
    margin-bottom: 8px;
}

.dnddiv:hover {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    /*cursor: grabbing;*/
}

.dnddiv .card-content .img_lnk {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background-color: #f1f1f1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    padding-right: 4px;
}

.dnddiv .card-content .img_lnk:hover {
    overflow: visible;
}

.dnddiv .card-content .img_lnk img{
    float: left;
    height: 40px;
    width: 40px;
    padding: 0px 4px;
    border-radius: 50%;
    margin-right: 10px;
    background: #f1f1f1;
}

.dnddiv .card-header {
    float: left;
    text-align: center;
    margin: 6px 0px 6px 6px;
    box-shadow: 0 12px 20px -10px rgba(230, 230, 230, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(230, 230, 230, 0.2);
    transition: all 1.0s ease;
}

.dnddiv .card-header i {
    font-size: 18px;
    line-height: 28px;
    width: 28px;
    height: 28px;
    /*color: white;*/
    transition: all 1.0s ease;
}

.dnddiv .card-title {
    text-align: left;
    padding: 0 6px;
    overflow: hidden;
    min-height: 40px;
    display: table;
    margin-top: 10px;
}

.dnddiv .card-content {
    margin: 0 20px 6px;
    padding-top: 3px;
    border-top: 1px solid #eeeeee;
    color: #999999;
}