0

This is conceptual right now, but I want to do something that feels complicated: place an element (like a <p> so that it is fixed next to another <p>) but still make it responsive if other elements are added to the page.

Here's what I mean. For reference, I am using Bootstrap 4's grid to create two columns. Let's say my HTML was: 

<div class="col-md-9">
     <h1>Header</h1>
     <h3>Ipsum Industries Subheader</h3>
     <p>This is the left column text</p>
</div>

<div class="col-md-3">
     <p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>

Is there any way that I can "nest" this second <p> element to directly next to the left column <p> regardless of other content?

Possible Questions

Why not just use absolute positioning? This is answered a lot, like here, on how to place two divs together. This is different - the reason I am thinking about this is that I am building an application in which Javascript will add elements into that first div. If I use a fixed/absolute location for this second element, it will look jumbled after, say, an <h4> is appended before it.

In short, I want to know if it's possible to create a relationship between elements like this that will work in a dynamic way?

Do you need to use the grid? No, I am using the Bootstrap grid as a starting point, but then I realized this issue with how the positioning will break when a new element is added ahead of the <p>. I can ditch the grid if necessary.

Community
  • 1
  • 1
darkginger
  • 652
  • 1
  • 10
  • 38
  • Well you can easily inject another p element next to the existing now, what seems to be the problem? – Roysh Jul 12 '16 at 06:32
  • Can you give a "before" and "after" example of how elements might be added and what you'd expect to see? – raduation Jul 12 '16 at 06:33

1 Answers1

1

Two suggestions, assuming I am understanding your question correctly.

Option A)

<h1>Header</h1>
<h3>Ipsum Industries Subheader</h3>
<div class="row">
    <div class="col-md-9">
         <p>This is the left column text</p>
    </div>

    <div class="col-md-3">
         <p>This is where I want the text to constantly be next to the <p> element in the left column</p>
    </div>
</div>

Option B)

<div class="col-md-9">
     <h1>Header</h1>
     <h3>Ipsum Industries Subheader</h3>
     <p>This is the left column text</p>
</div>
<div class="col-md-3">
     <h1>&nbsp;</h1>
     <h3>&nbsp;</h3>
     <p>This is where I want the text to constantly be next to the <p> element in the left column</p>
</div>
Jack Ducasse
  • 479
  • 1
  • 4
  • 9
  • Was just experimenting with this from the Bootstrap 3 documentation -- I am working with Option A right now by using the rows (which I lacked before), and that contains the second element in the right place. – darkginger Jul 12 '16 at 06:38
  • I've never used Bootstrap 4 I'm afraid, I just assumed that it would use the same row > col structure. Let me know how you go. – Jack Ducasse Jul 12 '16 at 06:40
  • Looks great -- was just commenting that I use Bootstrap 4 in case anyone finds this question. Thanks for the help. – darkginger Jul 12 '16 at 06:42