title: d3.js/css: Positioning elements within div
body: <p>I've created a line chart in d3.js with a panel at the bottom (a div outside of the chart) with certain elements like text and img within individual groups. The problem I'm having is positioning these elements within each group and they just seem to go after each other:</p>
  
  <p><a href="https://i.stack.imgur.com/kkktc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kkktc.png" alt="enter image description here"></a></p>
  
  <p>How would I, for instance, have them looking like I did previously but for an external div? Would I be looking to use CSS formatting?</p>
  
  <p>(This is how I had them looking previously, which is what I'm sort of looking for)</p>
  
  <p><a href="https://i.stack.imgur.com/G0O3y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G0O3y.png" alt="enter image description here"></a></p>
  
  <p>Also, this is the code I have for appending each element to their respective groups:</p>
  
  <pre><code>for(item in tweet_list) {
              var tweet = tweet_list[item];
  
              d3.select(".panel")
                  .append("g")
                  .attr("id", function(){return "p"+tweet['id_str'];})
                  .attr("position", "absolute")
                  .style("display", "block")
                  .classed("panel-body", true);
  
              var group = d3.selectAll("#p"+tweet['id_str']+"");
  
              group.append("text")
                  .text(function(){
                      var tweet_created_format = d3.timeFormat("%-I:%M%p, %e %b %Y")(d3.timeParse("%a %b %d %H:%M:%S %Z %Y")(tweet['created_at']));
                      return "@"+tweet['user']['screen_name']+"    ("+tweet_created_format+")";
                  });
  
              group.append("img")
                  .attr("width", 20)
                  .attr("height", 20)
                  .attr("src", function(d){return tweet['user']['profile_image_url']});
  
              group.append("text")
                  .text(function(){
                      return tweet['text'];
                  });
  
              group.append("img")
                  .attr("src", "{{ url_for('static', filename = 'img/twitter-like.svg') }}");
              group.append("img")
                  .attr("src", "{{ url_for('static', filename = 'img/twitter-retweet.svg') }}");
  
              group.append("text")
                  .text(function(){
                      return tweet['retweet_count'];
                  });
              group.append("text")
                  .text(function(){
                      return tweet['favorite_count'];
                  });
          }
  </code></pre>