CSS to have the same width for two divs

Question

So I am trying to create a responsive CSS for two divs. The first div is for the summary and the second div is for the summary description. How can I make the second div to be right underneath the first div while having the second div to get wrapped if the content in the second div exceeds the width of the first divs?

div.firstdiv {
  padding: 60px 0;
}

div.seconddiv {
  padding: 30px;
  text-align: center !important;
}

<div class="firstdiv">This is a test for customer issues & solutions
  <div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
  </div>

I do not understand your question. Can you clarify and check your markup ? — G-Cyrillus, Jun 20 '19 at 21:55
@G-Cyr He wants the second `div` to be underneath the first `div`. He also wants to wrap the text if it exceeds the width of the text. (I think) — Rojo, Jun 20 '19 at 22:02
this trick shoud do it; https://stackoverflow.com/a/55041133/8620333 (inline-block on parent and min-width:100% width:0 on the second text) — Temani Afif, Jun 20 '19 at 22:03

score 2 · Accepted Answer · answered Jun 20 '19 at 22:36

The answer to your question is in the question itself. This is how elements behave naturally. There is no need to have your second div be inside your first, just have them as siblings, like so:

<div class="firstdiv">
   This is a test for customer issues & solutions
</div>
<div class="seconddiv">
   We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>

And your CSS:

.firstdiv, .seconddiv {
  width:100%; // or whatever you'd like the width to be
  margin:10px // again, whatever you'd like.
}

By default, the seconddiv element will show below the firstdiv element, the widths will be equal, and the text will wrap.

Side note, you should wrap the text in a p tag or similar instead of just having it floating inside your div.

score 1 · Answer 2 · answered Jun 20 '19 at 22:09

You can try something with display grid, if you are willing to have a fixed size in the first div.

The solution is having both divs within the same wrapper and use CSS Grid in the wrapper div. Like this:

 div.grid{
  display: grid;
  grid-template-columns: minmax(min-content, 300px);
  grid-gap: 10px;
 }

<div class="grid">
  <div class="firstdiv">
   This is a test for customer issues & solutions
  </div>
  <div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
  </div>
</div>

CSS to have the same width for two divs

2 Answers2