Display diagram and text together (grouped)

I'd like to show graphics and text together. The graph on the left side and the corresponding text to its right. I have tried different things, for example, I have tried to implement this with a Panel-Group.

The result should be: Grafik+Text, Grafik+Text, Grafik+Text, Grafik+Text, Grafik+Text, ...

What must I do that graphic and text stay together, even if I resize the display?

JsFiddle

<div class="k-content">
   <!-- row -->
  <div class="row">
    <div class="panel-group">
      <div class="col-md-2">
        <div id="example_1"></div>
      </div>
      <div class="col-md-2">
        <h4>Example 1</h4>
        <p>Line 1
          <br> Line 2
          <br> Line 3
          <br> Line 4
          <br> 2014-04-06 07:17:47</p>
      </div>
    </div>
 <div class="panel-group">
      <div class="col-md-2">
        <div id="example_2"></div>
      </div>
      <div class="col-md-2">
        <h4>Example 2</h4>
        <p>Line 1
          <br> Line 2
          <br> Line 3
          <br> Line 4
          <br> 2014-04-06 07:17:47</p>
      </div>
    </div>
 <div class="panel-group">
      <div class="col-md-2">
        <div id="example_3"></div>
      </div>
      <div class="col-md-3">
        <h4>Example 3</h4>
        <p>Line 1
          <br> Line 2
          <br> Line 3
          <br> Line 4
          <br> 2014-04-06 07:17:47</p>
      </div>
    </div>
  </div>
  <!-- row -->

Answers


Try this in your css:

.col-md-2 {
    display:inline-block;
    vertical-align:middle; (optional)
    padding:3px; (optinal)
}

Then if you want, add "width" via media queries so there is never problem on your responsiveness...


Need Your Help

Find / search the AOT for an exact match

dynamics-ax-2009 x++ microsoft-dynamics axapta

Is it possible to find (search) in Dynamics AX 2009 for an exact match?