Question

I wish to align the title and summary(click the plus sign in site below)
as shown in the screenshot
my site
http://pligg.marsgibson.info/
screenshot
http://i47.tinypic.com/ntn55.jpg

suggest css for this

Answer 1

Without changing your current markup, a simple fix can be:

CSS

.title h2 {
    color: #187AAB;
    font-size: 14px;
    font-weight: bold;
    margin: 4px 0 0;
    padding: 0 20px 0 32px;
    position: relative;
}
.title h2 span {
  left: 0;
  position: absolute;
}

Print-screen:

---

What I did was to give some left and right padding to the h2 element, to limit the space available for the text inside it.

Then, to place the avatar on the proper place, I’ve used the CSS position.

---

EDITED

To address the issue of your trigger element, add to its CSS:

p.trigger {
    position: relative;
    z-index: 1;
}

---

EDITED

To address the height issue mentioned on the comment!

See this working Fiddle Example!

jQUery

// run only if elements are found
if ($('.title').size()>=1) {

  // initialize variables
  var $target = $('.title'),
      size    = 0,
      count   = $('.title').size();

  // for each element found
  $target.each(function() {

    // check the tallest element
    if (size===0) {
        size = $target.outerHeight(true);
    } else {
        sizeTMP = $target.outerHeight(true);
        size = (sizeTMP> size) ? sizeTMP : size;
    }

    // decrease the counter
    count--;

    // counter is 0, set the height
    if (count===0) {
        $target.css({ "height" : size + "px" });
    }

  });
}

Ps: The CSS display declaration for the class .subtext1 must be updated to: display:inline-block.