table layout adjustment for accordian

The accordion is from the angular-ui-botstrap so bootstrap style should be included (and already included), so your solution is to use the bootstrap grid (using row class and col class)

For this example,I use col-xs-4 only to force to display all 3 columns in fiddle.

   <accordion close-others="oneAtATime">
       <div class="row">

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
         </div>  

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

         <div class="col-xs-4">
              <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button class="btn btn-small" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
              </accordion-group>
              <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
              <accordion-group  heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

    </div>

http://jsfiddle.net/y03r5as2/1/

And remove the css style, you dont need that.

NB: you can follow the bootstrap grid documentation to adjust it for your need by adding col-sm- & col-md- and col-lg- too, to have different look for every screen large. Or only col-xs-, if you want to force 3 columns for all scren...

UPDATE: build the accordion from dynamic data

From a dynamic data, which is an array like: [item1, item2, ...],the best approach is to transform this data in the controller. You just divise this array to 3 new array inside array like: [[item1,item2,...], [item6,...], [item9, ...]]

Here's a simple function which divise your data :

   function separateArray(arr, size) {
      var newArr = [];
      var colsLength = Math.ceil(arr.length/size);
      for (var i=0; i<arr.length; i+=colsLength) {
        newArr.push(arr.slice(i, i+colsLength));
      }
      return newArr;
    }

and use it like:

$scope.transformedGroups = separateArray($scope.groups, 3);

it separate your data to 3 arrays: [[item1,item2,...], [item6,...], [item9, ...]]

And now you can have 3 cols easily with:

<div class="row">
    <accordion close-others="oneAtATime">
         <div class="col-xs-4" ng-repeat="rows in transformedGroups">
           <accordion-group heading="{{group.title}}"  ng-repeat="group in rows">{{group.content}}</accordion-group>
         </div>
   </accordion>
</div>

Working fiddle: http://jsfiddle.net/mrev7gL7/1/

Using bootstrap for this particular layout can be a good solution for you. Giving you a table layout without table markup and allowing your data to stack on smaller screen sizes cutting out the possibility of the dreaded horizontal scroll.

As I said in my comment above, you'll definitely want to be sure your data stacks at the xs screen size (<=767px):

<div class="col-lg-4 col-md-4 col-sm-4 col-xs">

However, if you need the data to stack by column rather than row, then you'll need to wrap the data into a single row and nest individual rows within the columns. See my fiddle here.

UPDATE-9/20/17:10:30EST

I am a goof! I cannot believe I didn't recommend this to begin with! I believe a flex-container and flex-items is the best solution to achieve your specs. I've started a NEW FIDDLE which should be a good start.

I found that you are used the css for panel like

.panel{
  width:30%;
  float:left;
}

Please try to change the css for panel like as follows

.panel{
  width:100%;
  float:left;
} 

I will work.