title: CSS how to align group of elements horizontally?
body: <p>I'm having trouble aligning a paragraph element with a group of button elements. I'm using jQuery and CSS to try and do this. </p>
  
  <p>Here is what I see: </p>
  
  <p><img src="https://i.stack.imgur.com/kBUCH.png" alt="enter image description here"></p>
  
  <p>And ideally I would like them all to be on the same horizontal line at the top of the screen, to avoid wasting pixel real-estate as I am. So have the DesignName text then immediately to the right of it in a line have the buttons.</p>
  
  <p>Here is how the elements are being added in code: </p>
  
  <pre><code>var theDiv = $("#theDiv");
  
  theDiv.append('&lt;div id="buttonMenuDiv"&gt;&lt;/div&gt;');
  
  var buttonDiv = $("#buttonMenuDiv");
  buttonDiv.append('&lt;p id="DesignName" class="DesignName"&gt;DesignName&lt;/p&gt;');
  buttonDiv.append('&lt;input type="button" id="MainMenu" value="Main Menu" &gt;');
  buttonDiv.append('&lt;input type="button" id="NewModule" value="New Module" &gt;');
  buttonDiv.append('&lt;input type="button" id="SearchDesigns" value="Search Designs" &gt;');
  buttonDiv.append('&lt;input type="button" id="DesignDescription" value="Design Description" &gt;');
  buttonDiv.append('&lt;input type="button" id="SaveWork" value="Save Work" &gt;');
  buttonDiv.append('&lt;input type="button" id="PackageDesign" value="Package Design" &gt;');
  buttonDiv.append('&lt;input type="button" id="Tutorial" value="Tutorial" &gt;');
  </code></pre>
  
  <p>The "DesignName" class just specifies font attributes (size, color) so I didn't include it. Thanks for any help. </p>
  
  <p>(Having some EDITING trouble with the single quotes in the append() calls)</p>